VueJS - how to properly make a modular component?

Question

JavaScript

Greetings!
Through WebPack 4 + VueJS, I build the application and get an error.
Let's take a simple application example:

<template>
  <div id="hello" class="class_123">
    <h2>{{message}}</h2>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        message: 'Welcome to Vue.js'
      }
    }
  }
</script>

<style>
  .class_123 {
    font-family: Verdana;
    color: navy;
  }
</style>

I break it into modules (template, scripts, styles) with the following structure:
main.vue (component's main file):

<template src="./modal.html"></template>
<style src="./modal.css"></style>
<script src="./modal.js"></script>

modal.js:

export default {
  name: 'app',
  data () {
    return {
      message: 'Welcome to Vue.js'
    }
  }
}

modal.css:

.class_123 {
  font-family: Verdana;
  color: navy;
}

modal.html:

<div id="app" class="class_123">
  <h2>{{message}}</h2>
</div>

I get an error:
Returning back to main.vue:

<template>
  <div id="app" class="class_123">
    <h2>{{message}}</h2>
  </div>
</template>

<style src="./modal.css"></style>
<script src="./modal.js"></script>

- works...
That is . he does not like what <template>is in a separate file?
Questions:
1. How to solve this problem?
2. Is it right to split the application in parts like this?
Thank you!

Answer 1

try

<template src="./modal.html" lang="html"></template>

In general, there are different options for the design of the code, since "all felt-tip pens have different tastes and colors." For example, I'm starting to do everything in one file. As soon as the volume exceeds "one screen", I take out the most voluminous part (template, style or script) in a separate file. Although it is the template that, conceived, remains in the single-file component file itself (well, it's just more informative than putting it in another file).
PS: Maybe you have some kind of "linter" configured, and because of this, errors are lying around?