Как отделить методы от MyLayout.vue до mixin.js?

Question

Я хочу разделить методы MyLayout.vue в mixin.js

Это оригинальный MyLayout.vue

<template>
...

    <q-layout-drawer
      v-model="leftDrawerOpen"
      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
    >
      <q-list no-border link inset-delimiter>
        <q-list-header>Listas de tareas</q-list-header>
        <q-item v-for="list of lists" :key="list._id" 
          :class="{active:list._id == selected}" @click.native="selected = list._id">
          <q-item-main :label="list.title" />
          <q-item-side right icon="delete" 
          v-if="selected == list._id"
          @click.native="deleteList(selected)"/>
        </q-item>
        <q-item>
          <q-item-main>
            <q-input v-model.trim="list.title" placeholder="+ Nueva lista" @keyup.enter="sendList"/>
          </q-item-main>
          <q-item-side right icon="format_color_fill">
            <q-popover>
              <q-color-picker v-model="list.color"/>
            </q-popover>
          </q-item-side>
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { openURL } from 'quasar'

class List {
  constructor(title = '', color = '') {
    this.title = title;
    this.color = color;
  }
}

export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop,
      list: new List(),
      lists: [],
      selected: undefined,
    }
  },
  created() {
    this.getLists();
  },
    methods: {
        openURL,
        submit () {
          return
        },
        sendList() {
        if(this.list.title == '') { return }
        else {
          fetch('http://localhost:3000/api/lists', {
            method: 'POST',
            body: JSON.stringify(this.list),
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            }
          })
            .then(res => res.json())
            .then(data => {
              this.getLists();
              this.list = new List();
            });
        }
        },

      getLists() {
        fetch('http://localhost:3000/api/lists')
          .then(res => res.json())
          .then(data => {
            this.lists = data;
          });
      },

      deleteTask(listId) {
        fetch('http://localhost:3000/api/lists/' + listId, {
          method: 'DELETE',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.getLists();
          });
      },
    }
}
</script>

И я попробовал это: mixins.js

export default {
  created: function() {
    this.getLists();
  },
  methods: {
    sendList: function() {
      if(this.list.title == '') { return }
      else {
        fetch('http://localhost:3000/api/lists', {
          method: 'POST',
          body: JSON.stringify(this.list),
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.getLists();
            this.list = new List();
          });
      }
    },

    getLists: function() {
      fetch('http://localhost:3000/api/lists')
        .then(res => res.json())
        .then(data => {
          this.lists = data;
        });
    },

    deleteList: function(listId) {
      fetch('http://localhost:3000/api/lists/' + listId, {
        method: 'DELETE',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      })
        .then(res => res.json())
        .then(data => {
          this.getLists();
        });
    },
  }
}

(конечно, я удаляю функции из MyLayout.vue)

У меня есть эта ошибка (дважды, например, если миксин запускается два раза, не знаю почему)

Свойство или метод «списки» не определены в экземпляре, но имеются ссылки во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Кажется, что если я помещу методы во внешний файл, он не сможетполучить данные.Я также попытался добавить следующие данные в mixins.js перед методами:

data () {
    return {
      list: new List(),
      lists: [],
      selected: undefined,
    }
  },

, но я получаю еще много ошибок

в MyLayout.vue

Ошибка в data (): «ReferenceError: список не определен»

Свойство или метод leftDrawerOpen не определен в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Свойство или «списки» метода не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство 'title' of undefined"

TypeError: Невозможно прочитать свойство 'title' из неопределенного

в mixins.js

Список не определен

Редактировать : Я тоже пытался использовать класс в файле mixin.js (из-за экспорта по умолчанию) ... У меня все еще есть двойная ошибка:

Списки "Свойство или метод"”Не определен в экземпляре, но на него ссылаются во время рендеринга".