Change to Vue Composition Api

decomposedSetupComponent.vue

// ...
<script>
import {
    ref,
    watch,
    computed,
    onMounted,
    onUnmounted
} from '@vue/composition-api'
import { fetchUserPosts } from '@/api'

function useScroll() {
    const pageOffset = ref(0)
    const update = () => {
        pageOffset.value = window.pageYOffset
    }

    onMounted(() => window.addEventListener('scroll', update))
    onUnmounted(() => window.removeEventListener('scroll', update))

    return { pageOffset }
}

function useFetchPosts(props) {
    const isLoading = ref(false)
    const posts = ref([])

    watch(
        () => props.id,
        async id => {
            isLoading.value = true
            posts.value = await fetchUserPosts(id)
            isLoading.value = false
        }
    )

    return { isLoading, posts }
}

export default {
    props: {
        id: Number
    },
    setup(props) {
        const { isLoading, posts } = useFetchPosts(props)
        const count = computed(() => posts.value.length)

        return {
            ...useScroll(),
            isLoading,
            posts,
            count
        }
    }
}
</script>
// ...