Custom marker in Vue 3 - no work

Maps SDK for Web (JavaScript)
#1

I’m creating a project in Vue 3 following the documentation for this framework at this link: Using TomTom Maps with Vue 3. I also followed the guide on how to add a custom marker, but it’s not working in my Vue project. Do you have any other links or videos to suggest to help me with this task?
I also tried to delete the child node elements of the mapboxgl-marker, setting a background color for the parent node, but it still doesn’t work.

#2

Can you show the code?

#3 
<script>
import { onMounted, ref } from 'vue';
import { store } from '../store';
export default {
  name: 'ShowMapComponent',
  data() {
    return {
      store,
    }
  },
  setup() {
    const mapRef = ref(null);

    onMounted(() => {
      const tt = window.tt;
      var map = tt.map({
        key: 'insert apikey',
        center: [store.apartment.longitude, store.apartment.latitude],
        zoom: 15,
        container: mapRef.value,
        style: 'tomtom://vector/1/basic-main',
      });
      map.addControl(new tt.FullscreenControl());
      map.addControl(new tt.NavigationControl());
      addMarker(map);
    })

    function addMarker(map) {
      const tt = window.tt;
      var location = [store.apartment.longitude, store.apartment.latitude];
      var popupOffset = 50;
      var marker = new tt.Marker({ width: 50, height: 50 }).setLngLat(location).addTo(map);
      marker.getElement().innerHTML = `<div style="width: 50px;height: 50px;background-color: #fe8376a1;border-radius: 60px 60px 0px 60px;position: relative;transform: rotate(45deg)"";><div class="marker" style="height: 40px;width: 40px;border-radius: 50px 50px 0px 50px;position: absolute;transform: rotate(315deg);background-image: url('../src/assets/img/b-logo.png');background-size: contain;top: 7%;left: 8%;"></div></div>`
      var popup = new tt.Popup({ offset: popupOffset });
      reverseGeocoding(marker, popup);
      map.scrollZoom.disable();
      marker.setPopup(popup).togglePopup();
    }
    function reverseGeocoding(marker, popup) {
      const tt = window.tt;
      tt.services.reverseGeocode({
        key: 'insert api key',
        position: marker.getLngLat()
      }).then(function (result) {
        popup.setHTML(result.addresses[0].address.freeformAddress);
      })
    }

    return {
      mapRef,
    };
  }
}
</script>

I found a solution, but i’m sure there is a best way to solve this problem.
It works only with inline style, if i create a new element with separate css it doesn’t work

#4

I have moved marker style to <style></style> section and it works for me.
Can you show the code that is not working?