Update info on how to use the "output" property (#236)

Co-authored-by: Laura Kalbag <[email protected]>

Author: rlaffers

docs/final-states.mdx

@@ -105,7 +105,7 @@ const coffeeMachine = createMachine({
 
 ## Output
 
-When a machine reaches its top-level final state, it can produce output data. You can specify this output data in the `.output` property of the machine:
+When a machine reaches its top-level final state, it can produce output data. You can specify this output data in the `.output` property of the machine config:
 
 ```ts
 import { createMachine, createActor } from 'xstate';

docs/migration.mdx

@@ -1223,7 +1223,7 @@ Breaking change
 
 :::
 
-To produce output data from a machine which reached its final state, use the `output` property instead of `data`:
+To produce output data from a machine which reached its final state, use the top-level `output` property instead of `data`:
 
 <Tabs>
 <TabItem value="v5" label="XState v5 beta">
@@ -1265,6 +1265,50 @@ const machine = createMachine({
 </TabItem>
 </Tabs>
 
+
+To provide a dynamically generated output, replace `invoke.data` with `invoke.output` and add a top-level `output` property:
+
+<Tabs>
+<TabItem value="v5" label="XState v5 beta">
+
+```ts
+// ✅
+const machine = createMachine({
+  // ...
+  states: {
+    finished: {
+      type: 'final',
+      output: ({ event }) => ({
+        answer: event.someValue,
+      }),
+    },
+  },
+  output: ({ event }) => event.output,
+});
+```
+
+</TabItem>
+
+<TabItem value="v4" label="XState v4">
+
+```ts
+// ❌ DEPRECATED
+const machine = createMachine({
+  // ...
+  states: {
+    finished: {
+      type: 'final',
+      data: (context, event) => {
+        answer: event.someValue,
+      },
+    },
+  },
+});
+```
+
+</TabItem>
+</Tabs>
+
 ### Don't use property mappers in `input` or `output`
 
 :::breakingchange