Custom marker in Vue 3 - no work

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.

Can you show the code?

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

    onMounted(() => {
      const tt =;
      var 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());

    function addMarker(map) {
      const 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);
    function reverseGeocoding(marker, popup) {
      const tt =;{
        key: 'insert api key',
        position: marker.getLngLat()
      }).then(function (result) {

    return {

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

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