title: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'fire' of undefined"
body: <p>I'm creating a laravel SPA and I'm using vue.js as a framework. I'm adding a sweetalert package in my project but whenever i use the <code>toast</code> function it gets me an error. I tried using other functions like <code>swal.fire</code> and it works except for <code>toast.fire</code>. Can someone help me with this? Here are some of my codes.</p>
  
  <p>app.js</p>
  
  <pre class="lang-js prettyprint-override"><code>
  require('./bootstrap');
  
  import Vue from 'vue'
  import { Form, HasError, AlertError } from 'vform'
  import moment from 'moment'
  import VueRouter from 'vue-router'
  import VueProgressBar from 'vue-progressbar'
  import swal from 'sweetalert2'
  
  window.Form = Form;
  window.swal = swal;
  window.toast = toast;
  window.Vue = require('vue');
  
  Vue.use(VueRouter)
  Vue.component(HasError.name, HasError)
  Vue.component(AlertError.name, AlertError)
  
  
  const toast = swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
  
  
  Vue.use(VueProgressBar, {
      color: 'rgb(143, 255, 199)',
      failedColor: 'red',
      height: '2px'
    })
  
  const routes = [
      { path: '/dashboard', component: require('./components/Dashboard.vue').default },
      { path: '/profile', component: require('./components/Profile.vue').default},
      { path: '/users', component: require('./components/Users.vue').default}
    ]
  
  const router = new VueRouter({
      mode: 'history',
      routes // short for `routes: routes`
    })
  
    Vue.filter('upText', function(text){
      return text.charAt(0).toUpperCase() + text.slice(1);
    });
  
    Vue.filter('myDate', function(created){
      return moment(created).format('MMMM Do YYYY');
    });
  
  
  Vue.component('dashboard', require('./components/Dashboard.vue').default);
  Vue.component('profile', require('./components/Profile.vue').default);
  Vue.component('users', require('./components/Users.vue').default);
  
  
  const app = new Vue({
      el: '#app',
      router
  });
  
  </code></pre>
  
  <p>Users.vue</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
  //html codes
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data(){
              return{
              users: {},
                  form: new Form({
                      name: '',
                      email: '',
                      password: '',
                      type: '',
                      bio: '',
                      photo: '',
                  })
              }
          },
  
          methods: {
              loadUsers(){
                  axios.get("api/user").then(( {data }) =&gt; (this.users = data.data));
              },
              createUser(){
                  this.$Progress.start();
                  this.form.post('api/user');
                  toast.fire({
                  type: 'success',
                  title: 'User Created',
                  position: 'top-end',
                  })
                  this.$Progress.finish();
              }
          },
          created() {
              console.log('Component mounted.');
              this.loadUsers();
          }
      }
  &lt;/script&gt;
  </code></pre>