Fix/616 vue custom event listeners

[andrewbeng89]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally for affected output targets
• Tests (npm test) were run locally and passed
• Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: #616

In example-project/vue-app/src/components/Input.vue v-model binding and @myChange handling are not behaving as expected:

<template>
  <div>
    <MyInput
      v-model="inputValue"
      @myChange="handleChange"
    >
    </MyInput>
    <div class="inputResult">
      <p>Input v-model: {{ inputValue }}</p>
      <p>Change Event: {{ changeEvent }}</p>
    </div>
  </div>
</template>

The corresponding E2E test for this behaviour should pass:

  it('should allow to interact with input element', async () => {
    await $('my-input').$('input').setValue('Hello World');
    await expect(await $$('.inputResult p').map((p) => p.getText())).toEqual([
      'Input v-model: Hello World',
      'Change Event: Hello World'
    ]);
  });

What is the new behavior?

• Any Vue out component with an emitted @Event customEvent defined in Stencil should handle @customEvent as expected (with or without v-model defined)
• If defined in stencil.config.ts, v-model bindings should work as expected
• Tests:
  • with v-model: https://github.com/andrewbeng89/stencil-ds-output-targets/blob/fix/616-vue-custom-event-listeners/example-project/vue-app/tests/test.e2e.ts#L8
  • without v-model: https://github.com/andrewbeng89/stencil-ds-output-targets/blob/fix/616-vue-custom-event-listeners/example-project/vue-app/tests/test.e2e.ts#L16

Does this introduce a breaking change?

• Yes
• No

[christian-bromann]

LGTM 👍

Thanks a lot!