title: What causes this "maximum call stack size exceeded" error?
body: <p>I am working on a <strong>Vue 3</strong> and Bootstrap 5 app. I needed a date-picker and I choose <strong><a href="https://icehaunter.github.io/vue3-datepicker/" rel="nofollow noreferrer">Vue 3 Datepicker</a></strong>.</p>
  <p>In <code>components\Ui\Datepicker.vue</code> I have:</p>
  <pre><code>&lt;template&gt;
    &lt;datepicker
        @selected=&quot;handleSelect&quot;
        v-model=&quot;dateSelected&quot; 
        :upper-limit=&quot;picked_to&quot;
        :lower-limit=&quot;picked_from&quot;
        class=&quot;datepicker text-center&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import { ref } from 'vue';
      export default {
          setup() {
          const dateSelected = ref(new Date());
          return {dateSelected}
          },
  
          methods: {
             handleSelect() {
               this.$emit('setDate')
             }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>In <code>components\Ui\Navigation.vue</code> I have:</p>
    
          
              
          
      
    
      import Datepicker from './Datepicker'
  
      export default {
          inject: ['$apiBaseUrl'],
        name: 'Navigation',
        components: {
              Datepicker,
          },
  
          data() {
          return {
            // more code
          }
        },
  
          methods: {
              setDate() {
          this.$emit('setDate');
              }
        },
      }
    
  <p>In <code>components\Content.vue</code> I have:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;main&quot;&gt;
      &lt;div class=&quot;d-sm-flex&gt;
        &lt;h1&gt;{{ title }}&lt;/h1&gt;
  
        &lt;Navigation
          @setDate='setDate'
        /&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;content&quot;&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navigation from './Ui/Navigation'
  
  export default {
    inject: ['$apiBaseUrl'],
    name: 'Content',
    components: {
      Navigation,
    },
  
    props: {
      title: String,
    },
  
    emits: ['setDate'],
    
    data() {
      return {
        headers: {
          'content-type': 'application/json',
          'Accept': 'application/json'
        },
  
       from: '',
       to: '',
  
      }
    },
  
    methods: {
     sendData() {
      this.axios.post(`${this.$apiBaseUrl}/submit`, this.fields, {options: this.headers}).then((response) =&gt; {
      if (response.data.code == 200) {
        this.isReport = true;
      }
      }).catch((errors) =&gt; {
        this.errors = errors.response.data.errors;
       });
      }
     },
      setDate() {
        console.log('Date');
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  <h3>The problem</h3>
  <p>Although I select a date from the datepicker, the <code>setDate()</code> method is not executed. The Chrome console shows instead:</p>
  <pre><code>Maximum call stack size exceeded
  </code></pre>
  <h4>Where is my mistake?</h4>