引用vue组件前后覆盖问题

页面中抽出了两个组件，想在主页面中引入这两个组件，但是后引入的会把前面那个覆盖，只显示后面引入那个，找了很久也找不到解决办法，请教一下各位网友！

后引入product.js，先引入的bestsell.js就会被覆盖

<head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/http-vue-loader"></script>
        <script src="../js/bestsell.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/product.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    </head>

img

后引入bestsell.js，先引入的product.js就会被覆盖

<head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/http-vue-loader"></script>
        <script src="../js/product.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/bestsell.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    </head>

img

vue 引入全局在 min.js

审查元素，看看覆盖的原因