Injecting WAA via ref to account for load delay.

sample/vue-sample/src/App.vue

@@ -28,5 +28,7 @@ nav {
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  width: 100%;
+  align-items: center;    
 }
 </style>

sample/vue-sample/src/assets/main.css

@@ -1,3 +1,13 @@
 body {
+  background-color: azure;
+  margin: 2rem;
   font-size: 1.5rem;
+  font-weight: 800;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+button {
+  border-width: 4px;
+  border-style: solid;
+  border-color: lightpink;
 }

sample/vue-sample/src/components/EmbeddedButton.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <button type="button" data-waa-click="foo" data-waa-name="embedded-event">Send Click Event</button>
+        <a data-waa-click="bar" data-waa-name="embedded-event" href="https://adequate.country" target="_blank">Send Click Link</a>
+        <p>Click me nothing happens; click green background; magic</p>
+    </div>
+</template>
+
+<style scoped>
+div {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    padding: 1rem;
+    background-color: yellowgreen;
+    align-items: center;
+}
+</style>
+

sample/vue-sample/src/views/SampleView.vue

@@ -1,13 +1,16 @@
 <template>
   <main>
-    <p>I am sample</p>
-    <button @click="sendEvent()">Send Event</button>
+    <p>Demostration of using Click and Custom Actions on Vue Components</p>
+    <button type="click" @click="sendEvent()">Send Event</button>    
     {{  status }}
+    <EmbeddedButton data-waa-click="component-click" data-waa-name="embedded-button"/>
   </main>
 </template>
 
 <script setup>
+import EmbeddedButton from '../components/EmbeddedButton.vue'
 import { inject, ref } from 'vue'
+
 const waa = inject('waa');
 const status = ref('idle');
 
@@ -16,9 +19,9 @@ const sendEvent = async () => {
     session: 'cjhw92nf9aq',
     cohort: 'c1233'
   }
-  console.log(`Sending event: ${JSON.stringify(params)}`);
-  status.value = 'pending...'
-  await waa.dispatchEvent('interest', params);
+  console.log(`Sending event: ${JSON.stringify(params)}`);  
+  status.value = 'pending...';  
+  await waa.value.dispatchEvent('interest', params);
   status.value = 'sent'
 }
 </script>
@@ -29,6 +32,6 @@ main {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  max-width: 300px;
+  max-width: 600px;
 }
 </style>