title: TypeError: Cannot read properties of undefined (reading '__ob__') in Nuxt
body: <p>The error appears when navigating from one page with the ProductCard component to another.
  I believe the error comes from the data fetching or the <code>mounted()</code>, but I haven't been able to solve it. The ProductCard component is just a visual one with some props. So the error must be here.</p>
  <p>Full error:</p>
  <pre><code>client.js:228 TypeError: Cannot read properties of undefined (reading '__ob__')
  at VueComponent.Vue.$destroy (vue.runtime.esm.js:4004:18)
  at destroy (vue.runtime.esm.js:3175:27)
  at invokeDestroyHook (vue.runtime.esm.js:6148:59)
  at invokeDestroyHook (vue.runtime.esm.js:6153:9)
  at invokeDestroyHook (vue.runtime.esm.js:6153:9)
  at invokeDestroyHook (vue.runtime.esm.js:6153:9)
  at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6501:30)
  at VueComponent.Vue.$destroy (vue.runtime.esm.js:4010:8)
  at destroy (vue.runtime.esm.js:3175:27)
  at invokeDestroyHook (vue.runtime.esm.js:6148:59)
  </code></pre>
  <p>My page <code>.vue</code> file template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;main&gt;
      &lt;ProductTabs&gt;&lt;/ProductTabs&gt;
  
      &lt;div
        v-if=&quot;productsLoading&quot;
        class=&quot;spinner-border&quot;
        style=&quot;width: 3rem; height: 3rem&quot;
        role=&quot;status&quot;
      &gt;
        &lt;span class=&quot;sr-only&quot;&gt;Loading...&lt;/span&gt;
      &lt;/div&gt;
      &lt;v-container v-else fluid&gt;
        &lt;v-row d-flex justify=&quot;center&quot;&gt;
          &lt;ProductCard
            v-for=&quot;product in products&quot;
            :key=&quot;product._id&quot;
            :product-title=&quot;product.productName&quot;
            :product-price=&quot;product.price&quot;
            :product-img1=&quot;product.img1&quot;
            :product-img2=&quot;product.img2&quot;
          &gt;&lt;/ProductCard&gt;
          &lt;br /&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
    &lt;/main&gt;
  &lt;/template&gt;
  </code></pre>
  <p>My page <code>.vue</code> file script:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    path: '/',
    name: 'ProductsPage',
    components: { ProductTabs },
    // variables
    data() {
      return {
        products: [],
        productsLoading: false,
      }
    },
    // call the get Poducts method
    mounted() {
      this.getAllProducts()
    },
    // get products from api and save into products array
    methods: {
      async getAllProducts() {
        this.productsLoading = true
        try {
          const data = await this.$axios.$get('api/products')
          this.products = data
          this.productsLoading = false
          return this.products
        } catch (err) {
          this.productsLoading = false
          return err
        }
      },
    },
  }
  &lt;/script&gt;
  </code></pre>