Storybook 4 and Vue errors

addons.js

// import '@storybook/addon-actions/register';
// import '@storybook/addon-links/register';
// import '@storybook/addon-notes/register';
// import '@storybook/addon-knobs/register';

index.js

import Vue from 'vue'
import VueMaterial from 'vue-material'

import { storiesOf } from '@storybook/vue'
import { linkTo } from '../../.storybook/addons'

import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import '@/assets/material-icons.css'
import App from '@/App'
import Login from '@/components/Login'
import Welcome from './Welcome'
// import MainScreen from '../MainScreen'

Vue.use(VueMaterial)

storiesOf('Welcome', module).add('to Storybook', () => ({
  components: { App, Welcome },
  template: '<welcome :showApp="action" />',
  methods: { action: linkTo('Login') },
}))
storiesOf('Login', module)
  .add('story as a template', () => '<login>Login as a function template</login>')
  .add('story as a component', () => ({
    components: { App, Login },
    template: '<login>Login stuff here</login>',
  }))
// storiesOf('MainScreen', module)
//   .add('story as a template', () => '<main-screen>Main Screen as a function template</main-screen>')
//   .add('story as a component', () => ({
//     components: { MainScreen },
//     template: '<main-screen>Main Screen stuff here</main-screen>',
//   }))

storybook-config.js

import { configure } from '@storybook/vue'

import Vue from 'vue'
import VueMaterial from 'vue-material'

import Login from '@/components/Login'

Vue.use(VueMaterial)
Vue.component('login', Login)

function loadStories() {
  // You can require as many stories as you need.
  require('../src/stories');
}

configure(loadStories, module);

webpack.config.js

'use strict'
const path = require('path')
// const webpack = require('webpack')
const merge = require('webpack-merge')
const prodWebpackConfig = require('../build/webpack.prod.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const webpackConfig = merge(prodWebpackConfig, {})

module.exports = webpackConfig

Welcome.vue

<template>
  <v-app>
    <v-container fluid>
        <div class="main">
          <h1>Welcome to STORYBOOK</h1>
          <p>
            This is a UI component dev environment for your app.
          </p>

          <p>The repo for this project exists here
            <a class="link"
               href="https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate"
               target="_blank"
               rel="noopener noreferrer">
              vuetify-storyboard-boilerplate
            </a>
          </p>

          <p>
            We've added some basic stories inside the

            <code class="code">src/stories</code>
            directory.
            A story is a single state of one or more UI components. You can have as many stories as you want.
            (Basically a story is like a visual test case.)
          </p>
          <p>
            See these sample

            <a class="link" @click.prevent="showApp" role="button" tabIndex="0">stories</a>
            for a component called

            <code class="code">Button</code> .
          </p>
          <p>
            Just like that, you can add your own components as stories.
            You can also edit those components and see changes right away.
            (Try editing the
            <code class="code">Button</code> component located at
            <code class="code">src/stories/Button.js</code>.)
          </p>
          <p>
            This is just one thing you can do with Storybook.
            Have a look at the

            <a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer">
              Storybook
            </a>
            repo for more information.
          </p>
          <p class="note">
            <b>NOTE:</b>
            Have a look at the

            <code class="code">.storybook/webpack.config.js</code>
            to add webpack loaders and plugins you are using in this project.
          </p>
        </div>

      </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'welcome',

  props: {
    showApp: {
      type: Function,
      default: () => console.log('Welcome to storybook!')
    }
  }
}
</script>

<style>
.main {
  margin: 15px;
  max-width: 600px;
  line-height: 1.4;
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans,
  sans-serif;
}

.logo {
  width: 200px;
}

.link {
  color: #1474f3;
  text-decoration: none;
  border-bottom: 1px solid #1474f3;
  padding-bottom: 2px;
}

.code {
  font-size: 15px;
  font-weight: 600;
  padding: 2px 5px;
  border: 1px solid #eae9e9;
  border-radius: 4px;
  background-color: #f3f2f2;
  color: #3a3a3a;
}

.note {
  opacity: 0.5;
}
</style>