vue3 new joiner, why @click not work on a button in follow vue3 codes-CodePudding

Following codes, I am confused why add1 function not work on button click? please note codes are saved as html file and run in chrome.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>

<div id="app">
    <!-- TODO: this is the place for my quesiton, why add1 doesn't work -->
    <button @click="add1">
        Hello, count is {{count}}
    </button>
</div>

</body>
</html>

<script>

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

        methods = {
            add1() {
                alert("Click!")
                count  
            }
        }
    )
    app.mount('#app')

</script>

The warn/error msg i see in google developer console is: Property "add1" was accessed during render but is not defined on instance. and, Extraneous non-props attributes (add1) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

CodePudding user response：

Your app declaration has syntax errors and does not include methods. Try:

const app = Vue.createApp({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    add1 () {
      alert("Click!")
      count  
    }
  }
})
app.mount('#app')