docs: replace useSpring example (fixes vueuse#148)

The old example was not working, due to a change in the useSpring API and was therefore replaced.
This new example shows a complete Vue component and therefore lowers the barrier to using useSpring.

docs/content/3.api/2.use-spring.md

@@ -36,27 +36,54 @@ Stop is a function allowing you to stop all the ongoing animations for the sprin
 
 ## Example
 
-```typescript
-const target = ref<HTMLElement>()
+In the example below, click the green box to animate it, or press the escape key to stop the animation.
 
-const { set, values, stop } = useSpring(target, {
-  damping: 50,
-  stiffness: 220,
+```html
+<template>
+  <div class="container" tabindex="0" @keyup.esc="stop()">
+    <div ref="box" class="box" @click="animate">Click me</div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useSpring, useMotionProperties } from '@vueuse/motion'
+
+const box = ref(null)
+
+const { motionProperties } = useMotionProperties(box, {
+  x: 0,
+  y: 0,
 })
 
-const onClick = () => {
-  set({
-    scale: 2,
-  })
-}
+const { set, stop } = useSpring(motionProperties, {
+    duration: 1000,
+    bounce: 0.0,
+})
 
-const onClickOut = () => {
+function animate() {
   set({
-    scale: 1,
+    x: Math.random() * 400,
+    y: Math.random() * 400,
   })
 }
-
-const stopTransitions = () => {
-  stop()
+</script>
+
+<style scoped>
+.container {
+  width: 500px;
+  height: 500px;
+  outline: 2px solid #41B883;
 }
+.box {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #41B883;
+  color: white;
+}
+</style>
+
 ```