title: Vue components not loading
body: <p>I was given this problematic codebase, where the Vue components aren't loading in.</p>
  
  <p>Vue is mounting, but without any components.</p>
  
  <p>This is a Laravel 5.7 app, using blade templates with some Vue added in.</p>
  
  <p><strong>This is the initial code:</strong></p>
  
  <pre><code>import 'babel-polyfill'
  import loadClientScripts from './load-client-scripts'
  import 'bootstrap-material-design/js/'
  // Vue &amp; axios
  import Vue from 'vue'
  import { axios } from '../axios-config'
  
  import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
  
  import { createLocales } from '../vue-i18n-config'
  import Noty from 'noty'
  //Components
  import signInForm from './components/SignInForm'
  import signUpForm from './components/SignUpForm'
  import forgotPassForm from './components/ForgotPassForm'
  // import RegisterToAgency from './components/RegisterToAgency'
  import SendEmailForm from './components/SendEmailForm'
  import AgencyServiceCategories from './components/AgencyServiceCategories'
  import DropdownWithCheckboxes from './components/DropdownWithCheckboxes'
  import LasiCoalitionAgencies from './components/LasiCoalitionAgencies'
  import ServiceProviders from "./components/ServiceProviders";
  import ServiceProvider from "./components/ServiceProvider";
  import vSelect from "vue-select";
  
  window.axios = axios
  
  Vue.component('v-select', vSelect)
  
  // Bootstrap Vue    
  Vue.use(BootstrapVue)
  export function createApp() {
    const i18n = createLocales(window.locale)
  
    // Components
    Vue.component('sign-in-form', signInForm)
    Vue.component('sign-up-form', signUpForm)
    Vue.component('forgot-pass-form', forgotPassForm)
    // Vue.component('register-to-agency', RegisterToAgency)
    Vue.component('send-email-form', SendEmailForm)
    Vue.component('agency-service-categories', AgencyServiceCategories)
    Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
    Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
    Vue.component('service-providers', ServiceProviders)
    Vue.component('service-provider', ServiceProvider)
  
  
    new Vue({
      i18n
    }).$mount('#app')
  
  }
  </code></pre>
  
  <p><strong>sign in form component for example:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-form
        id="sign-in-form"
        @submit="onSubmit"
      &gt;
        &lt;div class="form-group"&gt;
          &lt;b-form-input
            id="sgi-email"
            v-model="model.email"
            required
            name="email"
            :state="state('email')"
            type="email"
            :placeholder="$t('validation.attributes.email_address')"
          /&gt;
          &lt;b-form-feedback&gt;{{ feedback('email') }}&lt;/b-form-feedback&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group mb-3"&gt;
          &lt;b-form-input
            id="sgi-password"
            v-model="model.password"
            required="required"
            name="password"
            :state="state('password')"
            type="password"
            :placeholder="$t('validation.attributes.password')"
          /&gt;
          &lt;b-form-feedback&gt;{{ feedback('password') }}&lt;/b-form-feedback&gt;
        &lt;/div&gt;
        &lt;div class="form-group my-0"&gt;
          &lt;a
            class="text-opacity forgot-pass-link"
            href="#"
          &gt;
            {{ $t('labels.user.password_forgot') }}
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/b-form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    console.log('IM HIT')
  export default {
    name: 'SignInForm',
    data() {
      return {
        model: {
          email: '',
          password: ''
        },
        validation: {}
      }
    },
    mounted() {
      this.test()
    },
    methods: {
      test() {
        console.log("test")
      },
      feedback(name) {
        if (this.state(name)) {
          return this.validation.errors[name][0]
        }
      },
      state(name) {
        return this.validation.errors !== undefined &amp;&amp;
          this.validation.errors.hasOwnProperty(name)
          ? 'invalid'
          : null
      },
      onSubmit(evt) {
        evt.preventDefault()
        window.axios
          .post('/login', this.model)
          .then(response =&gt; {
            location.href = '/app'
          })
          .catch(e =&gt; {
            if (e.response.status === 422) {
              this.validation = e.response.data
              return
            }
          })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas help!</p>
  
  <p>in the example sign in form, the console does output the "Im hit" that I had placed to ensure that things were loaded.</p>
  
  <p>Thanks</p>