在Laravel 5.4中编译Vue js文件时出错

Question

I'am working on a project where i use Laravel 5.4 and Vue.js. it works perfectly when i use just one component, but i need to separate my code to two components and import one to another. However it not working and i get an error like is shown and the below image.

Please help me, and thank you for advance.

<template>

      <table id="example1" class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Username</th>
            <th>Email</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <User is="user" v-for="user in users" v-bind:user="user"></User>
        </tbody>
      </table>
</template>

<script>
  import User from './User.vue';
  export default{

    data(){
      return {
        users:[]
      }
    },
    components:{User},
    created(){
      this.fetchUsers();
    },
    methods:{
      fetchUsers(){
        this.$http.get('api/users').then(response =>{
          this.users = response.data.users;
        });
      }
    },

  }

</script>

========================================================

<template>
          <tr>
            <td> {{ user.username }}</td>
            <td> {{ user.email }}</td>
            <td> {{ user.name }}</td>
          </tr>
</template>

<script type="text/x-template">
  export default{

        props:['user']
  }

</script>

Here is the error message enter image description here

</div>