Vue.js + Element UI + el-popover - dynamically changing trigger doesn't work - vue.js

Question

I want to change in runtime how my popover is opening (from 'hover' to 'click'). I added code similar to the below:
<el-popover
placement="top-start"
width="200"
:trigger="someCondition ? 'hover' : 'click'"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
The title and content successfully changes dynamically in runtime but the trigger stays with the initial value even if the condition changes.
What am I doing wrong?
PS - I am pretty new with vue.js (but very experienced with programming and other web frameworks - e.g. React).
Thanks!

Answer 1

Use the key modifier on the el-popover as the element should be recreated
The key special attribute is primarily used as a hint for Vue’s
virtual DOM algorithm to identify VNodes when diffing the new list of
nodes against the old list. Without keys, Vue uses an algorithm that
minimizes element movement and tries to patch/reuse elements of the
same type in-place as much as possible.
HTML:
<el-popover
:key="trigger"
placement="top-start"
title="Title"
width="200"
:trigger="trigger"
content="this is content, this is content, this is content">
<el-button slot="reference">Hover to activate</el-button>
</el-popover>
<el-button #click="changebehavior">Change behavior</el-button>
JS:
data() {
return {
visible: false,
trigger: 'hover'
};
},
methods: {
changebehavior() {
this.trigger = 'hover' == this.trigger
? 'click'
: 'hover'
}
}

Answer 2

Using key modifier
Working example
var Main = {
data() {
return {
visible: false,
title: 'Default title',
content: 'Default content',
trigger: 'click',
};
},
methods: {
changeToClick() {
this.title= 'Click title';
this.content= 'Click content will be here';
this.trigger = 'click';
},
changeToHover() {
this.title= 'Hover title';
this.content= 'Hover content will be here';
this.trigger = 'hover';
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.13.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.13.2/lib/index.js"></script>
<div id="app">
<template>
<el-popover
:key="trigger"
placement="top-start"
:trigger="trigger"
width="200"
:title="title"
:content="content">
<el-button slot="reference">Button</el-button>
</el-popover>
<el-button type="text" #click='changeToClick'>Change To Click</el-button>
<el-button type="text" #click='changeToHover'>Change To hover</el-button>
</template>
</div>