vuejs does not display the value within {{ }}, the text is displayed as is

Question

I developed a vuejs program and ran the npxserve command. I go into that directory and run npxserve. I browse http://localhost:300/myvuefile.html and only get the following output. {{count}} inside the button. My code:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> ;

<div id="app">
  <button @click="count ">{{ count }}</button>
</div>

<script>
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
</script>

I have to get the value of the count and on click the count should be incremented. Instead, I only get {{count}} as output. Please help to resolve this issue.

Answer 1

According to documentation-

So, either use -

like this

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>