title: Why is my vue component not showing up in vue-devtools and rendered as a data-v-xxx div?
body: <p>The problem I currently have is that my Vue component does not render how I expected it would.</p>
  
  <p>I'll attempt to clarify what I mean by this as I realise it's quite vague:</p>
  
  <p>Currently I have a Vue component which I render using:</p>
  
  <pre class="lang-js prettyprint-override"><code>if (document.querySelector('.dishes')) {
      Vue.component(
          'DishesList',
          require('../components/DishesList').default
      );
  
      new Vue({
          el: '#dishes',
      });
  }
  </code></pre>
  
  <p>This does actually work as the content specified in this component is being loaded. The HTML that results from loading it is:</p>
  
  <pre><code>&lt;div class="dishes"&gt;
      &lt;div id="dishes"&gt;
          &lt;div data-v-xxxxxx&gt;
              .....
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However it's not what I expected it would be. Whenever I've used Vue before, the component shown in the HTML would still be something like:</p>
  
  <pre><code>&lt;div class="dishes"&gt;
      &lt;div id="dishes"&gt;
          &lt;dishes-list&gt;&lt;/dishes-list&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>dishes-list</code> component is like this (I filtered out some stuff):</p>
  
  <pre><code>&lt;template&gt;
      .....
  &lt;/template&gt;
  
  &lt;script&gt;
      import Dish from "./Dish";
  
      export default {
          name: "DishesList",
          props: ["categories"],
          data: function () {
              return {
                  search:'',
                  order: {}
              }
          },
          components: {
              Dish,
          },
          methods: {
  
          },
          mounted() {
  
          },
          computed: {
          }
  
      }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
      .category {
          margin: 20px 0;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>This also results in the Vue devtools not being able to see my <code>dishes-list</code> component. The only thing that is recognized is the component <code>&lt;root&gt;</code> with nothing in it. My question is: what causes Vue to load a component as <code>&lt;div data-v-xxxx&gt;</code> instead of the <code>&lt;dishes-list&gt;</code> that I've seen before?</p>
  
  <p>Hope this all make sense. If I can do anything to clarify the question please do tell me as I'm quite new to Stackoverflow and I'm trying to make the best of it. I'm also quite new with Vue, so try to take that in mind if you know the answer.</p>