title: Vuejs Bugs view components
body: <p>I have this code for a component but it's not working.  It's give me an empty page when I view it in the localhost and I tried it from both of the ports 3000 and 8000.  It keeps giving me the same error, no data to show .</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;form&gt;
      &lt;a @click="addCategory" class="add"&gt;+ Add Category&lt;/a&gt;
          &lt;div v-for="(category, index) in categories" :key="category.id"&gt;
              &lt;input type="text" v-model="category.name" :ref="category.name"&gt;
              &lt;input type="number" v-model="category.display_order"&gt;
              &lt;a @click="removeCategory(index)" class="remove"&gt;delete&lt;/a&gt;
              &lt;div&gt;
                  &lt;img v-if="category.image" :src="'/images/${category.image}'" width="100"&gt;
                  &lt;lable v-else&gt;Image: &lt;/lable&gt;
                  &lt;input type="text" v-model.lazy="category.image"&gt;
              &lt;/div&gt;
              &lt;hr&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      export default {
          props: ['initialCategories'],
          data() {
              return {
                  categories: _.cloneDeep(this.initialCategories)
              };
          },
          methods: {
              removeCategory(index) {
                  if (confirm('Are you sure?')) {
                      this.categories.splice(index, 1);
                  }
              },
              addCategory() {
                  this.categories.push({
                      id: 0,
                      name: '',
                      image: '',
                      display_order: this.categories.length + 1
                  });
                  this.nextTick(() =&gt; {
                      window.scrollTo(0, document.body.scrollHeight);
                      this.$refs[''][0].focus();
                  })
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>&lt;style scoped&gt;
      hr {
          margin-bottom: 30px;
      }
      img {
          vertical-align: middle;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>and this is the app.js file</p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  /**
   * The following block of code may be used to automatically register your
   * Vue components. It will recursively scan this directory for the Vue
   * components and automatically register them with their "basename".
   *
   * Eg. ./components/ExampleComponent.vue -&gt; &lt;example-component&gt;&lt;/example-component&gt;
   */
  
  // const files = require.context('./', true, /\.vue$/i)
  // files.keys().map(key =&gt; Vue.component(key.split('/').pop().split('.')[0], files(key)))
  
  Vue.component('category-manager', require('./components/CategoryManager.vue'));
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  const app = new Vue({
      el: '#app'
  });
  
  </code></pre>
  
  <p>this is the view page for it </p>
  
  <pre><code>@extends('layouts.app')
  
  @section('title', ' - Categories')
  
  @section('content')
      &lt;h1&gt;Categories&lt;/h1&gt;
      &lt;category-manager :initial-categories="{{ $categories }}"&gt;&lt;/category-manager&gt;
  @endsection
  
  
  </code></pre>
  
  <p>and it looks like this <a href="https://i.stack.imgur.com/8ydiy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ydiy.jpg" alt="enter image description here"></a></p>
  
  <p>** by the way I'm using Larvel 7.4 and vuejs3</p>