How to handle 2 almost similar components?

In a page, I have 2 components which do almost the same thing, although one of them has a functionnality that the other has not.

Consider these 2 components:

Component 1

<template>
  <div>Something</div>
</template>

<script>
export default {
  name: 'Component 1',
  methods () {
    someMethod () {}
  }
}
</script>

Component 2

<template>
  <div>Something</div>
</template>

<script>
export default {
  name: 'Component 2',
  methods () {
    someMethod () {},
    someMethodSpecificToComponent2 () {}
  }
}
</script>

As you can see, both components are pretty similar, which makes me want to factorize them into 1 component. However, if I do so, the method someMethodSpecificToComponent2 would sometimes be useless since it is specific to 1 use case, which I believe is antipattern. If I don't factorize them, there will be some duplicated code, which is also a thing best avoided.

Also, I could put someMethodSpecificToComponent2 in a mixin, and import this mixin in the component that needs this function, but I am quite unsure this is the best solution.

What is the best way to handle 2 almost identical components, whether it is duplication, factorization with some parts left unused, factorization with a mixin, or anything else?