Fix people selector

package.json

@@ -23,7 +23,7 @@
     "ssb-sort": "^1.1.3",
     "vue": "^2.6.11",
     "vue-router": "^3.4.2",
-    "vue-select": "^3.9.5",
+    "vue-select": "^3.10.8",
     "workbox-build": "^4.3.1"
   },
   "devDependencies": {

ui/helpers.js

@@ -4,10 +4,11 @@ exports.getPeople = function(cb) {
     for (var id in profiles) {
       const profile = profiles[id]
       if (profile.image) {
+        const profileId = id
         SSB.net.blobs.localGet(profile.image, (err, url) => {
           people.push({
-            id,
-            name: profile.name || id,
+            id: profileId,
+            name: profile.name || profileId,
             image: err ? '' : url
           })
         })

ui/private.js

@@ -7,9 +7,9 @@ module.exports = function (componentsState) {
     template: `<div id="private">
         <span v-if="postMessageVisible">
         <v-select placeholder="recipients" multiple v-model="recipients" :options="people" label="name">
-          <template slot="option" slot-scope="option">
-            <img v-if='option.image' class="tinyAvatar" :src='option.image' />
-            <span>{{ option.name }}</span>
+          <template #option="{ name, image }">
+            <img v-if='image' class="tinyAvatar" :src='image' />
+            <span>{{ name }}</span>
           </template>
         </v-select>
         <input type="text" id="subject" v-model="subject" placeholder="subject" />