Vue: Add Form/Html template components

code/renderers/vue/template/components/Form.vue

@@ -0,0 +1,44 @@
+<template>
+  <form id="interaction-test-form" @submit.prevent="onSubmit">
+    <label>
+      Enter Value
+      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+    </label>
+    <button type="submit">Submit</button>
+    <p v-if="complete">Completed!!</p>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'my-form',
+
+  props: {
+    onSuccess: {
+      type: Function,
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      complete: false,
+    };
+  },
+
+  methods: {
+    setValue(event) {
+      this.value = event.target.value;
+    },
+    onSubmit() {
+      this.onSuccess(this.value);
+      setTimeout(() => {
+        this.complete = true;
+      }, 500);
+      setTimeout(() => {
+        this.complete = false;
+      }, 1500);
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/Html.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-html="content"></div>
+</template>
+
+<script>
+
+export default {
+  name: 'my-html',
+
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/index.js

@@ -2,5 +2,7 @@ import globalThis from 'global';
 
 import Button from './Button.vue';
 import Pre from './Pre.vue';
+import Form from './Form.vue';
+import Html from './Html.vue';
 
-globalThis.Components = { Button, Pre };
+globalThis.Components = { Button, Pre, Form, Html };