Nuxt / Vue : Component call a Method in a page

There is my issue:

My page listing.vue list all products. Theses products are in a Component, Product.vue.

In this component, there is a button to add this product to a selection, displaying on the listing.vue.

page/listing.vue :

<template>
  <div>
    <product v-for="...." />
     
    <section>
      <ul>
        <li>Produit 1</li>
        <li>Produit 3</li>
    </section>
  </div>
</template>

<script>
export default {
  methods: {
    addToSelection(id) {
      // Code to add Product to <ul> //
    }
  }
}
</script>

component/product.vue:

<template>
  <div>
    {{ product.title }}
    <button @click="addToSelection(product.id)">
      Add product to selection
    </button>
  </div>
</template>

<script>
export default {
  props: ['product'],
}
</script>

The problem is nuxt render an error:

the addToSelection method is unknown.