[Vuejs]-Conflicting event handlers in vue.js

There are some minor issues here and there with your code, but the following works well (not sure where exactly this is coming from tho).

Page.vue

<template>
  <div>
    <BackButton></BackButton>
    <FinishButton :visible="ready"></FinishButton>
  </div>
</template>

<script>
import BackButton from '../components/BackButton.vue'
import FinishButton from '../components/FinishButton.vue'

export default {
  name: 'Page',
  components: {
    BackButton,
    FinishButton,
  },
  data() {
    return {
      ready: true,
    }
  },
}
</script>

BackButton.vue

<template>
  <div>
    <button @click.stop="navigate">back</button>
  </div>
</template>

<script>
export default {
  name: 'BackButton',
  methods: {
    navigate() {
      console.log('B')
    },
  },
}
</script>

FinishButton.vue

<template>
  <div :style="visible ? { display: 'inline-flex' } : { display: 'none' }">
    <button @click.stop="navigate">finish</button>
  </div>
</template>

<script>
export default {
  name: 'FinishButton',
  props: {
    visible: Boolean,
  },
  methods: {
    navigate() {
      console.log('F')
    },
  },
}
</script>

Or at least, I cannot reproduce your issue with the provided snippet.