Fix interactive docs for #2973

src/components/MultiselectTags/MultiselectTags.vue

@@ -21,7 +21,7 @@
   -->
 
 <docs>
-## Single tag selector
+### Single tag selector
 
 ```vue
 <template>
@@ -42,7 +42,7 @@ export default {
 </script>
 ```
 
-## Multiple tag selector
+### Multiple tag selector
 ```vue
 <template>
 	<div class="wrapper">
@@ -62,7 +62,7 @@ export default {
 </script>
 ```
 
-## Custom filter
+### Custom filter
 Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `filter` function-prop to `null`:
 ```vue
 <template>
@@ -71,16 +71,59 @@ Because of compatibility reasons only 5 tag entries are shown by default. If you
 		{{ value }}
 	</div>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			value: [1, 2, 3, 4, 5, 6]
+		}
+	}
+}
+</script>
 ```
 
 It's also possible to apply any custom filter logic by setting the `filter` function-prop to any custom function receiving the tag element and the index:
 ```vue
 <template>
 	<div class="wrapper">
-		<MultiselectTags v-model="value" :filter="(element, index) => element.id > 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible" />
+		<MultiselectTags v-model="value" :filter="(element, index) => element.id >= 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible" />
 		{{ value }}
 	</div>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			value: [
+				// This is the structure how data is usually returned by the server
+				{
+					id: 1,
+					displayName: 'Number1',
+					canAssign: true,
+					userAssignable: true,
+					userVisible: true
+				},
+				{
+					id: 2,
+					displayName: 'Number2',
+					canAssign: true,
+					userAssignable: true,
+					userVisible: true
+				},
+				{
+					id: 3,
+					displayName: 'Number3',
+					canAssign: true,
+					userAssignable: true,
+					userVisible: false
+				},
+			]
+		}
+	}
+}
+</script>
 ```
 </docs>