Vue EventBus won't transfer object attributes

Question

I would appreciate your help with two Vue Single Page components.

Component 'Searchbar' contains a dialog for user inputs. These user inputs are needed in component 'ResultList' for further use. Therefor I want to use Vue EventBus for transfer.

The user input is an object with two attributes:

userInput: {
    userName: '',
    taskNr: ''
  },

and shall be transfered to 'ResultList' with EventBus:

emitUserInput: function () {
  EventBus.$emit('emitUserInput', this.userInput)
}

in 'ResultList' is a listener method that is supposed to store the object within the components data-Object:

userInputListener: function () {
  EventBus.$on('emitUserInput', setUser => {
    this.userInput.userName = $userInput.userName
    this.userInput.taskNr = $userInput.taskNr
  })
}

Unfortunately there are no changes inside the userInput-object of 'ResultList'. Its attributes userName and taskNr remain empty Strings.

I would be happy about any ideas. Thanks in advance!

Update

Here is the code calling 'emitUserInput()' within 'Searchbar' component

<el-form-item>
      <el-button @click='emitUserInput(), toggleInputForm = false'>Bestätigen</el-button>
</el-form-item>

And here is the data object within 'Searchbar' component:

data () {
  return {
    userInput: {
      userName: '',
      taskNr: ''
  } 
}

Answer 1

Where do you call userInputListener? You can actually put EventBus.$on in your mounted() hook and see if it works:

mounted() {
  EventBus.$on('emitUserInput', payload => {
    this.userInput.userName = payload.userName
    this.userInput.taskNr = payload.taskNr
  })
}