(components): improve tree-shaking

[vaakian]

Describe the bug

Just found a issue with the tree-shaking of package @vueuse/components, this is what I tested out:

The code

created a fresh project using pnpm create vue@latest.

<!-- App.vue -->
<script setup lang="ts">
import { UseMouse } from "@vueuse/components";
</script>

<template>
  <UseMouse #="{ x, y }">
    {{ x }}
    {{ y }}
  </UseMouse>
</template>

The build size

Build without /* #__PURE__ */ comments: 114.23 kB

No code change, same build with /* #__PURE__ */ comments: 65.82 kB

I checked that sideEffects field in the package.json of @vueuse/components is already set to false, but it did'nt work, maybe vite(rollup?) should fix this as well?

Reproduction

https://vueuse.org/

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 131.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.1.0 - ~/.nvm/versions/node/v18.1.0/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.8.0 - ~/.nvm/versions/node/v18.1.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 105.0.1
    Safari: 16.1
  npmPackages:
    @vueuse/components: ^9.10.0 => 9.10.0 
    vue: ^3.2.45 => 3.2.45

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.