when creating a file with rails and webpack generates an error when inserting

create a file with rails and webpack:

rails new myapp --webpack=vue

and create a folder inside rails:

app/javascript
└── packs
    ├── app.vue
    └── hello_vue.js

app.vue:

<template>
  <div id="app">
    <ul v-for="result in results">
      <li>{{result.name}}</li>
    </ul>
    <!-- <p>{{ results.name}}</p> -->
  </div>
</template>

<script>
export default {
  data: {
    results: []
  },
  mounted(){
    axios.get("xxxxx")
    .then(response => {
      this.results = response.data
    })
  }
}
</script>

hello_vue.js:

    import Vue from 'vue'
    import App from './app.vue'

    document.addEventListener('DOMContentLoaded', () => {
      document.body.appendChild(document.createElement('hello'))
      const app = new Vue(App).$mount('hello')

      console.log(app)
    })

y lo agrego dentro de la vista de esta forma:

    <%= javascript_pack_tag 'hello_vue' %>

but when I want to create a new file inside packs I get an error when adding it in the views, it only works if I create a copy of the originals with an example number:

hello2_vue

import Vue from 'vue'
import App2 from './app2.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello2'))
  const app2 = new Vue(App2).$mount('hello2')

  console.log(app2)
})

app2:

<template>
  <div id="app2">
    <ul v-for="result in results">
      <li>{{result.name}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data: {
    results: []
  },
  mounted(){
    axios.get("xxxxxxxxxxxx")
    .then(response => {
      this.results = response.data
    })
  }
}
</script>

Any ideas that may be generating this error ?????