The $dispatch method might be more suitable for the specific requirement you mentioned. This approach helps maintain a separation between your component and the Vue instance, allowing for greater reusability across various scenarios.

<!-- Child component -->
<template>
  <div id="app">
    <test @click="$dispatch('test-click')"></test>
  </div>
</template>

Implementation in HTML:

<!-- Parent component -->
<test @test-click="testFunction">

Check out @Neps' answer for a detailed explanation.

Important note: If you are unable to modify your component or do not have access to it, consider using @Saurabh's answer instead.

Why does @click not work as expected?

The complexity of components varies greatly. While one may simply be a button wrapper, another could be a complex table with intricate logic inside. Vue cannot predict how v-model or v-on should behave, so this responsibility falls on the creator of the component.

How to manage click events

According to the Vue documentation, $emit is used to transmit events to the parent component. Here's an example from the docs:

Main file

<blog-post
  @enlarge-text="onEnlargeText"
/>

Component

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

(@ is shorthand for v-on shorthand)

The component captures the native click event and emits the parent's @enlarge-text="..."

To mimic handling a native click event, replace enlarge-text with click:

<blog-post @click="onEnlargeText">
  Enlarge text
</blog-post>

<!-- becomes -->
<button @click="$emit('click')">
  Enlarge text
</button>

But there's more. Using $emit allows you to pass a specific value with the event. In the case of a native click, the value is a MouseEvent (an event in JavaScript unrelated to Vue).

Vue saves this event in a $event variable. Therefore, it's recommended to emit $event along with the event to maintain the appearance of using a native event:

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>

During VueCONF US 2019, Chris Fritz (Vue.js Core Team Emeriti) pointed out

The use of the .native modifier can lead to broken components in Vue 2, especially when the root element of the base input changes unexpectedly. This modifier, considered an anti-pattern by Chris, will be removed in Vue 3. To address this issue, he recommended avoiding the .native modifier and utilizing the $listeners property instead to explicitly define parent care for element listeners.

Working with Vue 2

Utilizing $listeners:

To resolve this issue in Vue 2, Chris proposed using a fully transparent wrapper approach. By leveraging the $listeners property that contains all component listeners, developers can ensure seamless functionality without relying on the problematic .native modifier.

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

Simply adding v-on="$listeners" to the test component achieves this:

Test.vue (child component)

<template>
  <div v-on="$listeners">
    click here
  </div>
</template>

The <test> component, now a fully transparent wrapper, functions like a regular <div> element, ensuring all listeners work without relying on .native.

Check out the Demo:

Using $emit method:

Another approach suggested by Chris is using the $emit method to listen to child component events in the parent component. By emitting custom events from the child component and listening to them in the parent, a seamless communication channel is established.

Test.vue (child component)

<test @click="$emit('my-event')"></test>

In the parent component, listening to the custom event is as simple as:

App.vue

<test @my-event="testFunction"></test>

By adopting this approach, event handling in Vue 2 takes a more organized and structured form.

Check out the Demo:

Transitioning to Vue 3

Embracing v-bind="$attrs":

With the upcoming Vue 3 release, Chris highlighted the convenience it brings, particularly in creating simpler transparent wrappers using v-bind="$attrs". This attribute allows for effortless handling of child component attributes and events, making development more streamlined.

In Vue 3, the root element automatically listens to all child events, eliminating the need for manual adjustments in most cases.

Explore Demo #1:

For scenarios requiring attribute and event delegation to child elements like <input />, v-bind="$attrs" proves to be a handy tool.

Experience Demo #2:

This is the method I typically use, even though it may seem a bit long-winded:

@click="$emit('click', $event)"

UPDATE: Take a look at this example provided by @sparkyspider

<div-container @click="doSomething"></div-container>

Within the div-container component...

<template>
  <div @click="$emit('click', $event);">This is the inner div</div>
</template>

Parent elements cannot directly access the native events of components. One workaround is using v-on:click.native="testFunction", or you can trigger an event from the Test component with v-on:click="$emit('click')".

Another scenario where @click.native comes in handy is when developing a custom component and needing to detect click events on that component specifically. Take for instance:

#CustomComponent.vue
<div>
  <span>This is a custom component</span>
</div>

#App.vue
<custom-component @click.native="onClick"></custom-component>

In this case, utilizing @click.native ensures functionality as expected.

VueApp.vue

<div id="app">
    <customComponent @itemSelected="customFunction($event)"/>
</div>

CustomComponent.vue

<div @click="$emit('itemSelected', data)">
     Select this item
</div>

As stated in the official Vue documentation:

Vue has limitations in detecting certain changes to arrays, including:

1. Directly setting an item using its index, such as vm.items[indexOfItem] = newValue
2. Changing the length of the array, like vm.items.length = newLength

During my transition from Angular to VUE, I encountered this issue. The solution was relatively simple but challenging to uncover:

setValue(index) {
    Vue.set(this.arr, index, !this.arr[index]);
    this.$forceUpdate(); // Necessary for triggering view rerendering
}