vue + checkbox + change event - different results on page and in console

I have an issue I can't understand and solve. I have simple page in vue - set of checkboxes bound via v-model to array. This is how it looks like:

<template>
  <div id="app">
    <b-form-checkbox-group
      switches
      stacked
      v-model="selectedFruits"
      :options="options"
      @change="selectionChanged"
    >
    </b-form-checkbox-group>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      selectedFruits: [],
      options: [
        {
          text: 'Apple',
          value: {id: 1, val: 'apple'},
        },
        {
          text: 'Banana',
          value: {id: 2, val: 'banana'},
        },
        {
          text: 'Pear',
          value: {id: 3, val: 'pear'},
        },
        {
          text: 'Plum',
          value: {id: 4, val: 'plum'},
        }
      ]
    }
  },
  methods: {
    selectionChanged() {
      console.log(this.selectedFruits);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Nothing difficult, as you can see.

It works great on the screen - are displayed correctly. But when I check the value of selectedFuits in console I see different results than displayed - console shows "one click late" results. Can you explain the issue and direct me, how to solve it, please?