feat(docs): add pre-selected values for both single & multi modes

Closes #232

Author: TotomInc

docs/.vitepress/config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
           { text: "Dropdown menu header", link: "/demo/dropdown-menu-header" },
           { text: "Custom displayed options", link: "/demo/custom-displayed-options" },
           { text: "Controlled menu", link: "/demo/controlled-menu" },
+          { text: "Pre-selected values", link: "/demo/pre-selected-values" },
         ],
       },
     ],

docs/demo/pre-selected-values.md

@@ -0,0 +1,78 @@
+---
+title: 'Pre-selected values'
+---
+
+# Pre-selected values (single & multi)
+
+The following example demonstrates how to use the `VueSelect` component with pre-selected values.
+
+This can be achieved by setting a value to the `ref` which is passed as a `v-model` to the `VueSelect` component.
+
+<script setup>
+import { ref } from "vue";
+
+import VueSelect from "../../src";
+
+const options = [
+  { label: 'Option #1', value: 'option_1' },
+  { label: 'Option #2', value: 'option_2' },
+  { label: 'Option #3', value: 'option_3' },
+  { label: 'Option #4', value: 'option_4' },
+  { label: 'Option #5', value: 'option_5' },
+];
+
+const singleSelected = ref("option_1");
+const multiSelected = ref(["option_3", "option_5"]);
+</script>
+
+<p>Single select:</p>
+
+<VueSelect
+  v-model="singleSelected"
+  :options="options"
+/>
+
+<p>Multi select:</p>
+
+<VueSelect
+  v-model="multiSelected"
+  :options="options"
+  :is-multi="true"
+/>
+
+## Demo source-code
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import VueSelect from "vue3-select-component";
+
+const options = [
+  { label: "Option #1", value: "option_1" },
+  { label: "Option #2", value: "option_2" },
+  { label: "Option #3", value: "option_3" },
+  { label: "Option #4", value: "option_4" },
+  { label: "Option #5", value: "option_5" },
+];
+
+const singleSelected = ref("option_1");
+const multiSelected = ref(["option_3", "option_5"]);
+</script>
+
+<template>
+  <p>Single select:</p>
+
+  <VueSelect
+    v-model="singleSelected"
+    :options="options"
+  />
+
+  <p>Multi select:</p>
+
+  <VueSelect
+    v-model="multiSelected"
+    :options="options"
+    :is-multi="true"
+  />
+</template>
+```