One possible solution would be to use @focus and @blur events to check if form.name has a value before increasing or decreasing, this would be fired on focus or on blur events, so you will not have the methods fired on each character input or deletion.

for example:

<el-form-item label="Product name *">
  <el-input @focus="checkName" @blur="checkName" v-model="form.name"></el-input>
</el-form-item>


methods: {

 checkName() {
   //If form.name has a value then run increase method, otherwise run decrease method
  !!this.form.name ? this.increase() : this.decrease()
 },
 increase() {
  this.percentage += 8.3;
  if (this.percentage > 100) {
    this.percentage = 100;
  }
 },
 decrease() {
  this.percentage -= 8.3;
  if (this.percentage < 0) {
    this.percentage = 0;
  }
 },
}

You can see a working fiddle HERE

UPDATE

Alright so i did follow the rules you state on your question, and i didn't know you wanted to get the percentage of completion of the form, so in order to do that, i would suggest to use a computed property, you can read more about computed properties in the VueJS Documentation, this way the percentage is calculated based on the criteria we can give it, and only if the form has values.

computed: {
        formProgress: function () {
        let totalInputs = Object.keys(this.form).length;
        let filledInputs = 0;
        Object.values(this.form).forEach(val => {
          if (!!val){
            filledInputs++;
          }
        });
        return (filledInputs/totalInputs)*100
        }
    },

As you can see in one single computed property you can handle the complex logic and return the value reactively, to explain it better, i'm counting the lenght of the form object, to get total number of inputs in your form, so it's important to have all your form data inside the form data object, then i convert that object to an array to iterate it, and i check if each property has a value on it, if does it, i add 1 to the filledInputs counter, and finally just return a simple math to get the percentage. please check the new Fiddle here to see it in action:

FORM PROGRESS FIDDLE

If you have any other doubt just let me know.

UPDATE 2:

All right in order to only count for specific inputs for the form progress, i have modified the code to work based on an array that contains the names of the properties that are required. here is the full code:

data() {
      return {
        form: {
            name: '',
          lastName: null,
          categories: [{}],
        },
        requiredFields: ['name', 'categories']
      };
    },
    computed: {
        formProgress: function () {
        let totalInputs = this.requiredFields.length;
        let filledInputs = 0;
        Object.entries(this.form).forEach(entry => {
            const [key, val] = entry;
          if (this.requiredFields.includes(key)){
            switch (val.constructor.name) {
                case "Array":
                if (val.length !== 0){
                    if (Object.keys(val[0]).length !== 0){
                    filledInputs++;
                    }
                }
                break
              case "Object":
                if (Object.keys(val).length !== 0){
                    filledInputs++;
                }
                break
              default:
                if (!!val){
                    filledInputs++;
                }
            }
          }
        });
        return Number((filledInputs/totalInputs)*100).toFixed(1)
        }
    },

And here is the updated FIDDLE

As you can see now i'm using Object.entries to get the key and value of the form object, so you can have a single form object to send to your backend, this way i'm checking first if the key is in the required fields, and if has a value, so all you need to do is update the requiredFields data array with the same names as your inputs data property to make the validation work, also there is a validation depending if is array, array of objects, or object, that way it will validate input on each data type.

Hope this works for you.