Using vue js components when using it from cdn

I'm trying to use the ButtonCounter component as an example (https://vuejs.org/guide/essentials/component-basics.html#defining-a-component), but I just can't make it work. I use vue js 3 from a CDN.

I have the ButtonCounter.js file:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me  times.
    </button>`
}

Then I have the main js file with vue:

import ButtonCounter from './ButtonCounter.js'


const app = Vue.createApp({
  components: {
    ButtonCounter
  },

  data() {
    return {
      aaa: []
    }
  },
  methods: {
    ...
  }
}
})

app.mount('#app')

And finally I have the html where I link vue js from a cdn, and I specify the following inside the body:

<ButtonCounter />

But I can't see the button. What am I doing wrong?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Op4tv9N