tribute-replaced event listener interferes with the selectTemplate insertion

[BrennaEpp]

How can we reproduce this bug? I am using Vue.

Add an event listener to the tribute element for tribute-replaced in which you modify a variable on the instance.

  mounted() {
    let self = this;
    this.tribute = new Tribute({
      collection: [this.getCollection]
    });
    this.tribute.attach(this.$refs.inputField);

    this.$refs.inputField.addEventListener("tribute-replaced", function(e) {
        self.anyVar = "anything"; // this line here produces the bug
        console.log("Matched item:", e.detail.item);
    });
  }

getCollection() {
    return {
        trigger: "@",
        selectTemplate: function(item) {
          return "@" + "thistextshouldappear";
        }
        //options continue....
    }
}

What did you expect to happen? The instance is modified, no side-effects.

What happened instead? The instance is modified, but the selectTemplate of the collection gets loaded in for a second and then disappears. So where before it would insert "thistextshouldappear" once an item in the collection is selected, now it leaves only the text written out by the user.

What I am trying to do For reference, what I want is to get something like the following:

   var inputFromUser = "User writes something and mentions ${1} as well as their friend ${2}"
   var inputRef = [person3.name, person2.name]

The format doesn't matter, I just want to be able to store the selected vars separate from the String itself so that I can rebuild it properly later; if for example, person3's name changes , the stored String will reflect that change.

I wanted to use the tribute-replaced event listener to add the selected to an array to use as above. Other methods of achieving what I want are welcome.