[Vuejs]-Input placeholder value inexplicably moves to its parent element

This is happening because you have defined the prop placeholderText but using attribute placeholder.
As this attribute are not recognized as prop it inherit as attribute.

To prevent attribute inheritance you can use inheritAttrs: false and bind attributes to target elements using v-bind="$attrs"

<template>
    <div class="text-field">
        <input type="text" class="text-field__input" v-bind="$attrs" />
        <label :for="id" class="text-field__label"></label>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
}
</script>

More about non-prop attributes:
https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance