Fix error messages for validation

client/src/pages/license-activation.vue

@@ -18,7 +18,6 @@
           name="coupon"
           class="login-form__field"
           label="Coupon-Code"
-          v-model="coupon"
           v-slot="{field}"
         >
           <input-wrapper
@@ -35,6 +34,7 @@
             >
             <ErrorMessage
               name="coupon"
+              data-cy="coupon-local-errors"
               class="skillboxform-input__error"
             />
           </input-wrapper>
@@ -54,6 +54,14 @@
           </a>
         </div>
       </v-form>
+      <div v-if="couponErrors.length">
+        <small
+          data-cy="coupon-remote-errors"
+          class="skillboxform-input__error"
+          v-for="error in couponErrors"
+          :key="error"
+        >{{ error }}</small>
+      </div>
     </section>
     <section class="get-license">
       <h2>Oder, kaufen Sie eine Lizenz</h2>
@@ -76,6 +84,7 @@
 </template>
 
 <script>
+  import {defineComponent} from 'vue';
   import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import LoadingButton from '@/components/LoadingButton';
@@ -83,14 +92,15 @@
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
 
-  import {Form, Field} from 'vee-validate';
+  import {Form, Field, ErrorMessage} from 'vee-validate';
   import InputWrapper from '@/components/validation/InputWrapper';
 
-  export default {
+  export default defineComponent({
     mixins: [me, logout],
     components: {
       InputWrapper,
       LoadingButton,
+      ErrorMessage,
       'v-form': Form,
       Field
     },
@@ -153,7 +163,7 @@
           });
       },
     },
-  };
+  });
 </script>
 
 <style scoped lang="scss">