Vue component, prop is declared and passed, but console says prop is missing

I'm working on creating reusable form inputs using vue + laravel.

I have one prop that is required, and I pass it and it renders as expected, but the console still logs the error:

"Vue warn]: Missing required prop: "inputId"".

Inspecting the vue element shows the prop as defined. Why is an error being generated while the the data is being passed?

Text Input Component

<template>
    <input type="text" :name="inputId" :id="cssid" :placeholder="placeholder" :value="value">
</template>

<script>
    export default {
        props: {
          inputId: {
            type: String,
            required: true,
          },
          isRequired: {
            type: Boolean,
            default: false,
          },
          placeholder: {
            type: String,
          },
          value: {
            type: String,
            default: '',
          },
        },

        mounted() {
            console.log('text mounted.')
        },

        computed: {
          cssid() {
            return this.inputId + '_selection';
          },
        },
    }
</script>

Fragment of blade view where component is being called (I've tried with title in quotes and not in quotes, no difference)

<text-input
  input-id="title"
></text-input>

Resultant html Result is correct, but why the error?

<input type="text" name="title" id="title_selection">