I get this error trying to rendering a Vue test code on the browser:

[Vue warn]: Failed to resolve component: custom-input If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

custom-input is the child component I created.

app.component('custom-input ', {
  template: `
    <div>
      <label> 
        {{ label }}
        <input type="text" />  
      </label>
    </div>
  `,
  props: ['label']
})

It's parent is login-form.

app.component('login-form', {
  template: `
  <div>
    <form @submit.prevent="handleSubmit"> 
      <h1> {{ title }} </h1>
      <custom-input type="email" v-bind:label="emailLabel" /> 
      <custom-input type="password" v-bind:label="passwordLabel" />
      <button>Log in</button>
    </form>  
  </div>
  `,
  components: ['custom-input'],
  data () {
    return {
      title: "Login Form",
      email: '',
      password: '',
      emailLabel: 'Email',
      passwordLabel: 'Password',
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.email + "\n" + this.password)
    }
  }
})

As you can see, I'm using the custom-input tag twice in the login-form component, but I get the error I mentioned before, and they do not render, I just get the rest of the login-form template HTML code.

error

The error says that I got to exclude the custom component from the component resolution, so I added the line of code:

app.config.compilerOptions.isCustomElement = (tag) => tag.includes('custom-input');

But then I got the same result but without the warning message.