Нод, Экспресс и Вью-Кли

Question

Я пытаюсь создать приложение, использующее узел в качестве бэк-энда и ejs в качестве движка шаблонов, а Vue - в качестве фронт-фреймворка, поэтому express является маршрутизатором для страницы и страницы index.ejs. Я включаю скрипт tage на страницу js, где он загружает следующую команду в main.js

    import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
}) 

Так что для этого нужно визуализировать компонент vue в тег div, у которого есть идентификатор приложения, который выглядит как App.vue

<template>
   <h2>this is a template {{ title }}</h2>
</template>

<script>
export default {
  data () {
    return {
      title : 'shaked Vue',
      name : "shaked",
      ninjasx : [
        {
          name : "sjdhajs",
          showMe : false,
          mess : "we all have secreate"
        } ,
        {
          name : "shakex",
          showMe : false,
          mess : "we all black"
        } ,
        {
          name : "chxn",
          showMe : false,
          mess : "we all mr chen"
        }
      ]
    }
  } ,
  methods:{
    greet(){
      return 'hello world'
    } ,
    updateT(title){
      this.title = title.split("").reverse().join("")
    }
  }
}
</script>

<style scoped>
h1{
  color: red;
}
</style>

и экспресс-приложение выглядит так

      app.get('/' , function (req , res) {
    res.render('index', {data : "this is working"});
  });

и файл ejs вот так

<div id='app'></div>
<h1> <%= data %> </h1>

и что бы я ни пытался, я не могу заставить это работать, оно при запуске говорит, что в import Vue from 'vue' есть синтаксическая ошибка. Мне нужна помощь в соединении двух частей. Я немного поработал с Vue в качестве внешнего интерфейса и Node в качестве внутреннего, но я не могу их объединить.