Vue show menu function - vue.js

Question

I am trying to make a function that shows my menu but when I click it, I only get errors.
app.js:
const app = new Vue({
el: '#app',
});
new Vue({
el: '#demo',
data: {
show: true
}
})
In my component, I have:
<div class="relative inline-block text-left unselectable" id="demo"> <!-- Menu -->
<button type="button" v-on:click="show = !show" class="menu-btn material-icons">more_vert</button>
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" v-if="show">
<div class="dropdown-list rounded-md bg-white shadow-xs">
<ul>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn">Perfil</button></li>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn">Definições</button></li>
<li class="divider"></li>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn sair" #click.prevent="logout">Sair</button></li>
</ul>
</div>
</div>
</div>
I get these errors:
Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
at resources/js/components/Utils/UserMenu.vue
and
app.js:39733 [Vue warn]: Cannot find element: #example
PS: I just started in vue.js, do I need to export or declare something?

Answer 1

main.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
You have to declare show prop in data so it can be used in template otherwise you'll get error that property is not defined
App.vue
<template>
<div class="relative inline-block text-left unselectable" id="demo"> <!-- Menu -->
<button type="button" v-on:click="show = !show" class="menu-btn material-icons">more_vert</button>
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50" v-if="show">
<div class="dropdown-list rounded-md bg-white shadow-xs">
<ul>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn">Perfil</button></li>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn">Definições</button></li>
<li class="divider"></li>
<li class="block py-2 text-sm leading-5 text-sm"><button class="list-btn sair" #click.prevent="logout">Sair</button></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
show :false
}
},
}
</script>