Как разместить логи компонента c вне файла. vue сам

Question

Я создаю веб-приложение в Nuxt. js, и оно растет совсем немного. У меня есть страница, которая делает две вещи: одну, когда я создаю задачу, и одну, когда управляю этой задачей. На этой странице много методов, разделенных для того, когда я создаю задачу и когда я управляю задачей. Как я могу разделить эти модули на два файла и затем импортировать их только тогда, когда они мне нужны?

Этим методам также необходим доступ к состоянию компонента и другим функциям импорта Nuxt, таким как ax ios.

async create() {
      if (this.isSondaggioReady()) {
        try {
          await this.getImagesPath()
          const o = { ...this.sondaggio }
          delete o.id
          o.questions = o.questions.map((question) => {
            delete question.garbageCollector
            if (question.type !== 'checkbox' && question.type !== 'radio') {
              delete question.answers
              delete question.hasAltro
            } else {
              question.answers = question.answers.map((answer) => {
                delete answer._id
                delete answer.file
                delete answer.error
                if (answer.type !== 'image') delete answer.caption
                return answer
              })
            }
            if (question.hasAltro) {
              question.answers.push({
                type: 'altro',
                value: ''
              })
            }
            return question
          })
          console.log('TO SEND', JSON.stringify(o, null, 2))
          this.$store.commit('temp/showBottomLoader', {
            show: true,
            message: 'Crezione del sondaggio in corso'
          })
          const { data } = await this.$axios.post('/sondaggi/admin/create', o)
          this.sondaggio.id = data
          const s = {
            _id: data,
            author: this.$auth.user.email.slice(0, -13),
            title: this.sondaggio.title
          }
          this.$store.commit('temp/pushHome', { key: 'sondaggi', attr: 'data', data: [...this.$store.state.temp.home.sondaggi.data, s] })
          this.$store.dispatch('temp/showToast', 'Sondaggio creato correttamente')
          this.$router.replace('/')
        } catch (e) {
          console.log(e)
          this.$store.dispatch('temp/showToast', this.$getErrorMessage(e))
        } finally {
          this.$store.commit('temp/showBottomLoader', {
            show: false,
            message: 'Crezione del sondaggio in corso'
          })
        }
      }
    },

Вот пример того, что делает метод. Он вызывает асинхронные c функции, основанные на HTTP-запросах ax ios:

    async getImagesPath() {
      this.sondaggio.questions.forEach((question, i) => {
        question.answers.forEach((answer, j) => {
          if (answer.file instanceof File || answer.value.includes('data:image')) {
            this.uploadingImages.push({
              coords: [i, j],
              percentage: 0,
              file: answer.file || answer.value
            })
          }
        })
      })
      const requests = []
      this.uploadingImages.forEach((img) => {
        const temp = new FormData()
        temp.append('img', img.file)
        const req = this.$axios.post('/sondaggi/admin/images/add/' + this.sondaggio.title.replace(/\s+/g, ''), temp, {
          onUploadProgress: function (progressEvent) {
            img.percentage = Math.round(((progressEvent.loaded * 100) / progressEvent.total) * 90 / 100)
          },
          onDownloadProgress: function (progressEvent) {
            img.percentage = 90 + Math.round(((progressEvent.loaded * 100) / progressEvent.total) * 10 / 100)
          },
          headers: { 'Content-Type': 'multipart/form-data' }
        })
          .catch((err) => {
            console.log(err)
            img.percentage = 150
          })
        requests.push(req)
      })
      try {
        const response = await Promise.all(requests)
        response.forEach(({ data }, i) => {
          this.sondaggio.questions[this.uploadingImages[i].coords[0]].answers[this.uploadingImages[i].coords[1]].value = data[0]
        })
        this.$set(this.sondaggio, 'hasImages', this.uploadingImages.length > 0)
        this.uploadingImages = []
        await Promise.resolve()
      } catch (e) {
        console.log('handling gloval err', e)
        await Promise.reject(e)
      }
    },

Как вы можете видеть, запросы ax ios изменяют состояние компонента