[Vuejs]-Vue.js how to check if inputs from child components are filled so parent component can able/disable a button

You are looking for how to emit data, opposite to passing data down through a prop.

Here is a small example for an input field.

Child1.vue

<template>
  <p>
    Write something:
    <input v-model="inputText" />
  </p>
  <p>{{ inputText }}</p>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
    };
  },
  emits: ['emitInput'],
  watch: {
    inputText() {
      this.checkContent();
    },
  },
  methods: {
    checkContent() {
      this.$emit('emitInput', this.inputText === '');
    },
  },
};
</script>

App.vue (parent):

<template>
  <div id="app">
    <button :disabled="disabledButton">Parent Button</button>
    <Child1 @emitInput="parentMethod" />
  </div>
</template>

<script>
import Child1 from './Child1.vue';

export default {
  name: 'App',
  components: {
    Child1,
  },
  data() {
    return {
      disabledButton: true,
    };
  },
  methods: {
    parentMethod(payload) {
      //Since you had a 2nd parameter on line 24 in Child1, you can access it.
      //We were checking if input is empty or not, returning a boolean.
      this.disabledButton = payload;
    },
  },
};
</script>