chore(deps-dev): Bump @stencil/vue-output-target from 0.8.6 to 0.8.7 in /core (#28508)

Bumps
[@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.8.6 to 0.8.7.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/vue-output-target&package-manager=npm_and_yarn&previous-version=0.8.6&new-version=0.8.7)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

packages/vue/src/vue-component-lib/utils.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 // It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
-import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
+import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';
 
 export interface InputProps<T> {
   modelValue?: T;
@@ -53,16 +53,13 @@ const getElementClasses = (
  * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
  * @prop modelProp - The prop that v-model binds to (i.e. value)
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
- * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
- * correctly updated when a user's event callback fires.
  */
 export const defineContainer = <Props, VModelType = string | number | boolean>(
   name: string,
   defineCustomElement: any,
   componentProps: string[] = [],
   modelProp?: string,
-  modelUpdateEvent?: string,
-  externalModelUpdateEvent?: string
+  modelUpdateEvent?: string
 ) => {
   /**
    * Create a Vue component wrapper around a Web Component.
@@ -78,29 +75,27 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
     let modelPropValue = props[modelProp];
     const containerRef = ref<HTMLElement>();
     const classes = new Set(getComponentClasses(attrs.class));
-    const onVnodeBeforeMount = (vnode: VNode) => {
-      // Add a listener to tell Vue to update the v-model
-      if (vnode.el) {
+
+    /**
+     * This directive is responsible for updating any reactive
+     * reference associated with v-model on the component.
+     * This code must be run inside of the "created" callback.
+     * Since the following listener callbacks as well as any potential
+     * event callback defined in the developer's app are set on
+     * the same element, we need to make sure the following callbacks
+     * are set first so they fire first. If the developer's callback fires first
+     * then the reactive reference will not have been updated yet.
+     */
+    const vModelDirective = {
+      created: (el: HTMLElement) => {
         const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
         eventsNames.forEach((eventName: string) => {
-          vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => {
+          el.addEventListener(eventName.toLowerCase(), (e: Event) => {
             modelPropValue = (e?.target as any)[modelProp];
             emit(UPDATE_VALUE_EVENT, modelPropValue);
-
-            /**
-             * We need to emit the change event here
-             * rather than on the web component to ensure
-             * that any v-model bindings have been updated.
-             * Otherwise, the developer will listen on the
-             * native web component, but the v-model will
-             * not have been updated yet.
-             */
-            if (externalModelUpdateEvent) {
-              emit(externalModelUpdateEvent, e);
-            }
           });
         });
-      }
+      },
     };
 
     const currentInstance = getCurrentInstance();
@@ -146,7 +141,6 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
         onClick: handleClick,
-        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
       };
 
       /**
@@ -182,7 +176,12 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         }
       }
 
-      return h(name, propsToAdd, slots.default && slots.default());
+      /**
+       * vModelDirective is only needed on components that support v-model.
+       * As a result, we conditionally call withDirectives with v-model components.
+       */
+      const node = h(name, propsToAdd, slots.default && slots.default());
+      return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
     };
   });
 
@@ -199,7 +198,7 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
 
     if (modelProp) {
       Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-      Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+      Container.emits = [UPDATE_VALUE_EVENT];
     }
   }