What is correct way to create a npm package from a vuejs component and testing on local

Firstly, I scaffolded a vuejs project as a test container from vue-cli. Then I create a npm package "vue-npm-example" from a Vuejs component in local environment and imported in the above testing project.

In the package,

I ran npm link and in the project I ran npm link vue-npm-example,

Example.vue

<template>
    <div id="vue-npm-example">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'vue-npm-example',
        data() {
            return {
                msg: "Welcome to Your Vue.js App"
            }
        },
        mounted() {
            console.log('this is in compoennt file')
        }
    };
</script>

<style lang="scss">
</style>

main.js

import Example from './components/Example.vue'
export function install(Vue, options) {
    options = {
        installComponents: true
      }
    if (options.installComponents) {
        Vue.component('vuejs-example', Example)
    }    
}
export default Example

webpack.config.js

let path = require('path')
let webpack = require('webpack')
function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            '@': resolve('src')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map',
    node: {
        fs: 'empty'
    },
    watch: true
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     sourceMap: true,
        //     compress: {
        //         warnings: false
        //     }
        // }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

Then in the testing project I do

import Vue from 'vue'
import Example from 'vue-npm-example'
Vue.component('example', Example)

and use it like

<example></example>

I got error:

[Vue warn]: Failed to mount component: template or render function not defined.

I set the vue alias in the webpack config files for both package and project. The package got pulled in correctly because when I do console.log() in the package's main.js, it logs in the testing project. But no matter what I tried, the component in the package still won't work in the testing project.

Any suggestions?