VueJS : Unhandled error with simple script

Still learning VueJS, I just wanted to know why when I click on my button my function selection doesn't work. All the rest in the created() is fine and shows the correct , but in my methods section, just to show a console.log on a click event I have this error :

[Vue warn]: Unhandled error during execution of native event handler at

Am I missing something ?

I only have the code below and the CDN :

<div id="main-product">
      <button v-on:click="selection" type="button" class="">
        j'affiche coucou
      </button>
</div>


<script>

  if (document.querySelector("#main-product")) {
    const productForm = Vue.createApp({
      delimiters: ["${", "}"],
      data() {
        return {
          open: false,
        };
      },
      created() {
        console.log("vueJS fonctionne correctement");
      },
      methods: {
        selection() {
          console.log(coucou)
        }
      }
    }).mount("#main-product");
  }
</script>

Thank you for your help and support

The method is attempting to log an undefined symbol: coucou.

var app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
    selection() {
      console.log('coucou')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="main-product">
    <button v-on:click="selection" type="button" class="">
      j'affiche coucou
    </button>
  </div>
</div>