Problemas com VUE JS

Olá, tudo bem?

Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.

O script é o seguinte

	const template = `

	<nav id="sidebar">

	    <ul class="list-unstyled menu">

	        <li>

	            <a href="#">

	                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>

	                Home

	            </a>

	        </li>

	        <li>

	            <a href="#">

	                <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>

	                Analytics

	            </a>

	        </li>

	        <li>

	        <a href="#">

	            <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>

	            Ações

	        </a>

	        </li>

	        <li>

	            <a href="#">

	                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>

	                Controles

	            </a>

	        </li>

	        <li>

	            <a href="#">

	                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>

	                Configurações

	            </a>

	        </li>

	    </ul>

	    </nav>

	`

	export default {

	  name: "Sidebar", 

	  template,

	  delimiters: ["#{", "}#"]

	}

	 

	 

	 

	 

	============Preciso colocar um dropdown na opção Ações, algo assim

	 

	                <li

	                    v-for="item in items">

	                    <a :href="item.url"

	                       v-if="!item.children">

	                        

	                    </a>

	                    <span

	                        v-else

	                        v-on:mouseover="mouseover"

	                        v-on:mouseleave="mouseleave">

	                        {{ item.name }}

	                        

	                        <ul class=" dropdown"

	                           :class="{ isOpen }">

	                            <li

	                                v-for="child in item.children">

	                                <a :href="child.url">

	                                    {{ child.name }}

	                                </a>

	                            </li>

	                        </ul>

	                    </span>

	                </li>

	 

	var nav = new Vue({

	    el: '#nav',

	    data: {

	        isOpen: false,

	        items: [

	            {

	                url: '#acoes',

	                name: 'Ações',

	                children: [

	                    {

	                        url: '#link1',

	                        name: 'Opção 1'

	                    },

	                    {

	                        url: '#link2',

	                        name: 'Opção 2'

	                    },

	                    {

	                        url: '#link3',

	                        name: 'Opção 3'

	                    },

	                ]

	            }

	        ]

	    },

	    methods: {

	        mouseover: function () {

	            this.isOpen = true;

	        },

	        mouseleave: function () {

	            this.isOpen = false;

	        }

	    }

	});

	 

	 

	 

	Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.

	 

	 

	=============No index os imports estão assim

	 

	    <script type="importmap">

	      {

	        "imports": {

	          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

	        }

	      }

	    </script>

	    <script type="module">

	      import { createApp } from "vue";

	      import Sidebar from "/components/sidebar.js";

	      import Welcome from "/components/welcome.js";

	      const app = createApp({

	          delimiters: ["#{", "}#"],

	          components: {

	            Welcome,

	            Sidebar

	          },

	          data() {

	            return {}

	          },

	          methods: {

	          

	          }

	        }).mount("#wrapper");

	    </script>

	  </body>

	 

	Agradeço desde já.