docs(website): vue computed solution

Author: christianalfoni

packages/overmind-website/examples/guide/usingovermindwithvue/computed.ts

@@ -0,0 +1,24 @@
+export default () => [
+  {
+    fileName: 'components/SomeComponent.vue (template)',
+    target: 'markup',
+    code: `
+<div>
+  {{ title }}
+</div>
+`,
+  },
+  {
+    fileName: 'components/SomeComponent.vue (script)',
+    code: `
+export default {
+  props: ["id"],
+  data: (self) => ({
+    get title() {
+      return self.state.titles[self.id]
+    }
+  })
+}
+`,
+  },
+]

packages/overmind-website/guides/beginner/08_usingovermindwithvue.md

@@ -69,4 +69,14 @@ To run effects in components based on changes to state you use the **addMutation
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithvue/effect" })
+```
+
+## Computed
+
+Vue has its own observable concept that differs from Overmind. That means you can not use Overmind state inside a computed and expect the computed cache to be busted when the Overmind state changes. But computeds are really for caching expensive computation, which you will not do inside a component using Overmind anyways.
+
+What you might want is to introduce some logic, maybe combine som data from props. You can do so using a getter on your **data**.
+
+```marksy
+h(Example, { name: "guide/usingovermindwithvue/computed" })
 ```