SFCをコンパイルしても{{msg}}がHTMLに反映されない

前提

Vue.jsによる単一ファイルコンポーネントをwebpackを使ってバンドルしたときに問題が起こった。バンドルは正常に遂行できたがexample.vueのファイルの{{msg}}がブラウザで表示されない。
ファイル構成
self:.
│ index.html
│ package-lock.json
│ package.json
│ webpack.config.js
│
├───dist
│ main.js
│
└───src
│ index.js
│
└───components
example.vue

実現したいこと

index.htmlにexample.vueの{{msg}}を反映させる

発生している問題・エラーメッセージ

example.vueの{{msg}}をindex.htmlに反映させる

該当のソースコード

javascript
1
2```<template>
3    <div class="example">
4        {{ msg }}
5        <div>どうもこんにちは</div>
6    </div>
7    
8</template>
9  
10  <script>
11  export default {
12    data() {
13      return {
14        msg: 'Hello Vue Component'
15      }
16    }
17  }
18  console.log('Vue Work');
19  </script>

javascript
1import Vue from 'vue'
2import Example from './components/example.vue'
3
4const app = new Vue({
5	el: "#app",
6	components:{
7		Example,
8	},
9	data: {
10		message: 'Hello World'
11	}
12})

webpack
1const VueLoaderPlugin = require('vue-loader/lib/plugin')
2
3module.exports = {
4    mode: 'development',
5    resolve:{
6        alias:{
7            'vue$':'vue/dist/vue.esm.js'
8        }
9    },
10    module:{
11        rules:[
12            {
13                test:/\.vue$/,
14                loader:'vue-loader'
15            }
16        ]
17    },
18    plugins:[
19        new VueLoaderPlugin()
20    ],
21}