Vue3 components interfere

Question

So im working on an existing laravel project with vue3, which recently got upgraded from vue2 to vue3. After upgrading i have the problem that components interfere with each other.

for example:

child component:

<input v-model="input" />

export default {
   name: 'inputField'
   data() {
      return {
         input: ''
      }
   }
}

parent:

<inputField />
<inputField />

When i use one of the input fields, it affects the input variable of both of them.

I have already tried changing from laravel-mix to vite, but that didnt seem to work. I have searched online but no one else seems to have this problem. Does anyone know why this is and how to fix it?