Александр

<template>
  <div>
    <input type="text" v-model="form.templatename" />
    <pre>{{ form }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      form: {
        templatename: 'Тест'
      }
    };
  }
};
</script>

- <Form @submit="onSubmit" :validation-schema="schema">
+ <Form @submit="onSubmit" :validation-schema="schema" validate-on-mount>

:class="{ [`header_comp__headline--${hlStyle||hlDefault.style}`]: true, 'first-class': data.slideType == 'brand' }"

:class="[`header_comp__headline--${hlStyle||hlDefault.style}`, data.slideType == 'brand' ? 'first-class' : '']"

:class="[`header_comp__headline--${hlStyle||hlDefault.style}`, { 'first-class': data.slideType == 'brand' }]"

methods: {
    someMethod() {
        return this[this.dynamicVarName];
    }
}

<template>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c1"
    />
    Check 1
  </label>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c2"
    />
    Check 2
  </label>
  <pre>{{ form }}</pre>
</template>

<script>
const debounce = (handle, duration = 0) => {
  let timeout = null;

  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => handle.apply(this, args), duration);
  };
};

export default {
  name: 'App',
  data() {
    return {
      form: {}
    };
  },
  methods: {
    checkboxChange() {
      this.form.date = Date.now();
    }
  },
  created() {
    this.debouncedCheckboxChange = debounce(this.checkboxChange, 1500);
  }
};
</script>

export default {
    ...,
    watch: {
        isRuLocale() {
            // submit here
        }
    }
};