docs: update composition api imports, closes #1136

packages/docs/src/guide-composable/mutation.md

@@ -213,7 +213,7 @@ Our component now looks like:
 
 ```vue{2,8,16-20,23,32,34}
 <script>
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 

packages/docs/src/guide-composable/query.md

@@ -129,7 +129,7 @@ If you want to directly access the data object, use `result.value`:
 
 ```vue{2,19-21}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -158,7 +158,7 @@ In this example, you could also watch the `Ref` directly:
 
 ```vue{19-20}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -450,7 +450,7 @@ Let's say we want to sort our users on their last names:
 
 ```vue{2,19-21,24,34,35}
 <script>
-import { computed } from '@vue/composition-api'
+import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -569,7 +569,7 @@ This will re-fetch the query each time a property from the `variables` object ch
 Alternatively, you can pass a `Ref` directly:
 
 ```js
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 ```
 
 ```js{1-3,12}
@@ -598,7 +598,7 @@ function selectUser (id) {
 You can also pass a reactive object:
 
 ```js
-import { reactive } from '@vue/composition-api'
+import { reactive } from 'vue'
 ```
 
 ```js{1,15}

packages/docs/src/guide-composable/setup.md

@@ -14,8 +14,6 @@ Or:
 yarn add @vue/apollo-composable
 ```
 
-Note: `@vue/apollo-composable` supports Vue 2 thanks to [Vue Demi](https://github.com/vueuse/vue-demi).
-
 ## 2. Connect Apollo Client to Vue
 
 ### Vue 2
@@ -35,6 +33,10 @@ const app = new Vue({
 })
 ```
 
+::: warning
+In the rest of the guide, we will show code examples with Vue 3. If you need Vue 2, you might want to import the Composition API functions from `'@vue/composition-api'` instead of `'vue'`.
+:::
+
 ### Vue 3
 
 ```js
@@ -55,7 +57,7 @@ const app = createApp({
 You can also provide multiple Apollo Client instances to be used in your application. In this case, it's recommended to provide a `default` one:
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { ApolloClients } from '@vue/apollo-composable'
 
 const app = new Vue({

packages/docs/src/guide-composable/subscription.md

@@ -151,7 +151,7 @@ We can then `watch` the result as new data is received:
 
 ```vue{2,16-20}
 <script>
-import { watch } from "@vue/composition-api";
+import { watch } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {
@@ -183,7 +183,7 @@ For example, we could display the list of messages as we receive them:
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "@vue/composition-api";
+import { watch, ref } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {

packages/docs/src/zh-cn/guide-composable/mutation.md

@@ -213,7 +213,7 @@ sendMessage()
 
 ```vue{2,8,16-20,23,32,34}
 <script>
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 

packages/docs/src/zh-cn/guide-composable/query.md

@@ -129,7 +129,7 @@ export default {
 
 ```vue{2,19-21}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -158,7 +158,7 @@ export default {
 
 ```vue{19-20}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -450,7 +450,7 @@ const users = useResult(result)
 
 ```vue{2,19-21,24,34,35}
 <script>
-import { computed } from '@vue/composition-api'
+import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -569,7 +569,7 @@ function selectUser (id) {
 另外，你可以直接传递 `Ref`：
 
 ```js
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 ```
 
 ```js{1-3,12}
@@ -598,7 +598,7 @@ function selectUser (id) {
 你也可以传递一个响应式对象：
 
 ```js
-import { reactive } from '@vue/composition-api'
+import { reactive } from 'vue'
 ```
 
 ```js{1,15}

packages/docs/src/zh-cn/guide-composable/setup.md

@@ -19,7 +19,7 @@ yarn add @vue/apollo-composable
 你需要在根实例中提供一个默认的 Apollo Client 实例：
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 
 const app = new Vue({
@@ -36,7 +36,7 @@ const app = new Vue({
 你也可以提供为应用提供多个可用的 Apollo Client 实例。在这种情况下，建议提供一个 `default` 值：
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { ApolloClients } from '@vue/apollo-composable'
 
 const app = new Vue({

packages/docs/src/zh-cn/guide-composable/subscription.md

@@ -150,7 +150,7 @@ export default {
 
 ```vue{2,16-20}
 <script>
-import { watch } from "@vue/composition-api";
+import { watch } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {
@@ -182,7 +182,7 @@ export default {
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "@vue/composition-api";
+import { watch, ref } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {