VueJS Multiple Logic Topics, but with object API

mouse-and-fetch.vue

<template>
  <div>
    <template v-if="isLoading">Loading...</template>
    <template v-else>
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </template>
    <div>Mouse is at {{ x }}, {{ y }}</div>
  </div>
</template>

<script>
import { fetchPost } from "./api"

const fetchData = {
  data: {
    isLoading: true,
    post: null
  },
  mounted() {
    this.fetchPost()
  },
  watch: {
    id: "fetchPost"
  },
  methods: {
    async fetchPost() {
      this.isLoading = true
      this.post = await fetchPost(this.id)
      this.isLoading = false
    }
  }
}

const mouseData = {
  data: {
    x: 0,
    y: 0
  },
  mounted() {
    window.addEventListener("mousemove", this.updateMouse)
  },
  destroyed() {
    window.removeEventListener("mousemove", this.updateMouse)
  },
  methods: {
    updateMouse(e) {
      this.x = e.pageX
      this.y = e.pageY
    }
  }
}

export default {
  props: {
    id: Number
  },
  data() {
    return {
      ...fetchData.data,
      ...mouseData.data
    }
  },
  mounted() {
    fetchData.mounted.call(this)
    mouseData.mounted.call(this)
  },
  watch: {
    ...fetchData.watch
  },
  destroyed() {
    mouseData.destroyed.call(this)
  },
  methods: {
    ...fetchData.methods,
    ...mouseData.methods
  }
}
</script>