How to override quasar QTree component in a single file component in VueJS

I would like to override Quasar's QTree in a single file component from the code pen

I have created the component below but it does not override the method __onTickedClick

<script>
import QTree from 'quasar';

export default {
  name: 'MyTree',
  mixins: [QTree],
  data() {
    return {
      ticked: [],
    };
  },
  props: {
    tickSubStrategy: {
      type: String,
      default: 'none',
      validator: v => ['leaf'].includes(v),
    },
    tree: {
      type: Array,
      required: true,
    },
  },
  methods: {
    __onTickedClick(meta, state) {
      if (meta.indeterminate === true) {
        state = meta.indeterminateNextState;
      }
      if (meta.strictTicking) {
        const keys = [];
        if (this.tickSubStrategy === 'leaf') {
          const travel = meta => {
            if (meta.isParent) {
              keys.push(meta.key);
              meta.children.forEach(travel);
            } else if (
              meta.noTick !== true &&
              meta.tickable === true &&
              (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
            ) {
              keys.push(meta.key);
            }
          };
          travel(meta);
        } else {
          keys.push(meta.key);
        }
        this.setTicked(keys, state);
      } else if (meta.leafTicking) {
        const keys = [];
        const travel = meta => {
          if (meta.isParent) {
            if (state !== true && meta.noTick !== true && meta.tickable === true) {
              keys.push(meta.key);
            }
            if (meta.leafTicking === true) {
              meta.children.forEach(travel);
            }
          } else if (
            meta.noTick !== true &&
            meta.tickable === true &&
            (meta.leafFilteredTicking !== true || meta.matchesFilter === true)
          ) {
            keys.push(meta.key);
          }
        };
        travel(meta);
        this.setTicked(keys, state);
      }
    },
  },
};
</script>

<template>
  <q-tree
    :nodes="tree"
    ref="tree"
    node-key="id"
    tick-strategy="strict"
    :tick-sub-strategy="tickSubStrategy"
    :ticked.sync="ticked"
  >
    <template v-slot:default-header="prop">
      <div class="row items-center">
        <div class="text-weight-bold text-primary">{{ prop.node.title }}</div>
      </div>
    </template>
  </q-tree>
</template>

<style lang="stylus" scoped></style>

The code pen override works as expected.