使用WebStrom无法识别Vue代码

在第一次尝试使用Vue代码时，无法正确的显示Vue的关联性，尝试了许多次，时好时坏

用代码块功能插入代码，请勿粘贴截图

详细代码是这样的：

<div id="app">
  <input v-model="username">
  {{username}}
div>

<script src="js/vue.js">script>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        username:""
      }
    }
  })
script>

运行后有时无法识别Vue变量，会字符串形式打印{{username}}，并且WebStrom会显示如下所示的警告信息

img

尝试了很多种方法，确定了使用Vue3的js文件后无法正确显示vue，vue2.x的js文件可以偶尔显示成功

希望可以得到解决webstorm的vue信息提示问题和vue绑定失败的问题