title: Vue router-link changes url but does not change router-view component
body: <p>Just started using vue-router. Basically, whenever I click on a router-link, the URL changes but the router-view doesn't change the component being rendered unless I refresh the browser.</p>
  
  <p>Here are my codes.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="app"&gt;
        &lt;router-link to="/" exact&gt;Home&lt;/router-link&gt;
        &lt;router-link to="/about"&gt;About&lt;/router-link&gt;
  
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    import Vue from "vue";
      import VueRouter from "vue-router";
  
      Vue.use(VueRouter);
  
      import HomeComponent from "./assets/js/views/Home.vue";
      import AboutComponent from "./assets/js/views/About.vue";
  
      let router = new VueRouter({
        routes: [
          {
            path: "/",
            component: HomeComponent
          },
          {
            path: "/about",
            component: AboutComponent
          }
        ]
      });
  
      new Vue({
        el: "#app",
        router
      });
  </code></pre>
  
  <p><strong>Package.json snippet</strong></p>
  
  <pre><code>  "scripts": {
      "build": "webpack --display-error-details",
      "dev": "webpack-dev-server"
    },
    "devDependencies": {
      "@babel/core": "^7.7.4",
      "@babel/preset-env": "^7.7.4",
      "axios": "^0.19.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.6",
      "babel-preset-env": "^1.7.0",
      "css-loader": "^3.2.0",
      "dotenv": "^8.2.0",
      "electron": "^7.1.2",
      "file-loader": "^5.0.2",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "mini-css-extract-plugin": "^0.8.0",
      "node-sass": "^4.13.0",
      "sass-loader": "^8.0.0",
      "style-loader": "^1.0.0",
      "vue": "^2.6.10",
      "vue-axios": "^2.1.5",
      "vue-loader": "^15.7.2",
      "vue-router": "^3.1.3",
      "vue-style-loader": "^4.1.2",
      "vue-template-compiler": "^2.6.10",
      "vuex": "^3.1.2",
      "webpack-dev-server": "^3.9.0"
    },
    "dependencies": {
      "webpack": "^4.41.2",
      "webpack-cli": "^3.3.10"
    }
  
  </code></pre>
  
  <p><strong>Webpack Config</strong> <em>I'm also new with webpack so the problem might come from here</em></p>
  
  <pre><code>const HtmlWebpackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const VueLoaderPlugin = require("vue-loader/lib/plugin");
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader"
            }
          ]
        },
        {
          test: /\.(png|jpe?g|gif)$/i,
          loader: "file-loader"
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: { minimize: true }
            }
          ]
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "vue-style-loader", "css-loader", "sass-loader"]
        },
        {
          test: /\.vue$/,
          loader: "vue-loader"
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new VueLoaderPlugin()
    ],
    resolve: {
      alias: {
        vue$: "vue/dist/vue.esm.js"
      }
    }
  };
  
  </code></pre>
  
  <p>Also, on the vue-devtools, it detects the url-changes, but it does not affect the active route.
  <a href="https://i.stack.imgur.com/twevk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/twevk.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/vyNCv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vyNCv.png" alt="enter image description here"></a></p>