title: Nuxtjs handler.call is not a function
body: <p>been banging my head once more.</p>
  
  <p>I'm surprised I haven't seen a similar question here on SOF, but it's really weird.
  This code WAS working, but I moved into a standalone component to be used on multiple pages.
  This is the error I'm getting when I go to the page:</p>
  
  <p><code>handler.call is not a function</code></p>
  
  <p>I know for a fact it is this component because if I remove the component from the page, there is no error and runs fine. The component calls no functions and has no functions in the script. I have no idea what is going on.</p>
  
  <p>and in the console log, there isn't much help either:</p>
  
  <pre><code>TypeError: "handler.call is not a function"
      NuxtJS 21
  
      invokeWithErrorHandling
  
      callHook
  
      insert
  
      invokeInsertHook
  
      patch
  
      _update
  
      updateComponent
  
      get
  
      Watcher
  
      mountComponent
  
      $mount
  
      mount
  
      _callee5$
  
      tryCatch
  
      invoke
  
      method
  
      asyncGeneratorStep
  
      _next
  
      run
  
      notify
  
      flush
  </code></pre>
  
  <p>This is the very simple component source code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;button v-if="can_edit" class='btn-blue'&gt; Edit &lt;/button&gt;
          &lt;div v-for="card in cards" class='my-credit-card' v-bind:key="card.id"&gt;
              &lt;h5&gt;{{card.name}}&lt;/h5&gt;
              &lt;h5 class='mt-0'&gt;•••• •••• •••• {{card.last4}}&lt;/h5&gt;
              &lt;p class='small'&gt;Exp. {{card.expiration}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div v-if="cards.length == 0"&gt;
              &lt;p class='subtle'&gt;
                  Your saved payment methods will display here once you send your first card!
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;a v-if="(can_add &amp;&amp; cards.length &gt; 0)" href="/add-card" class='action'&gt; + Add New Card &lt;/a&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      data : function(){
          return {
              cards : [
                  {
                      id: 1,
                      name: "Lisa Smith",
                      last4: "4231",
                      expiration: "12/2022"
                  },
                  {
                      id: 2,
                      name: "John Smith",
                      last4: "1234",
                      expiration: "11/2023"
                  },
              ],
          };
      },
      props : {
          can_add : {
              default : true,
              type: Boolean,
          },
          can_edit : {
              default : true,
              type: Boolean,
          },
      },
      mounted : {
          // fetch cards
      },
  }
  &lt;/script&gt;
  
  </code></pre>
  
  <p>and this is how I'm importing the component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;section class='container'&gt;
          &lt;h1&gt;My Credit Cards&lt;/h1&gt;
          &lt;mycards :can_add="true" :can_edit="true"&gt;&lt;/mycards&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import mycards from '~/components/my_cards.vue';
  export default {
      data : function(){
          return {
              test : 1,
          };
      },
      components : {
          mycards,
      },
  }
  &lt;/script&gt;
  </code></pre>