svelte - svelte: コンポーネント間でリアクティブ データを渡す

Question

ユーザー プロファイルの pic を読み込む onMount を持つコンポーネント (userprofile) があり、ユーザー プロファイルの pic を更新する別のコンポーネント (updatePic) があります。 updatePic コンポーネントで更新されたときに、userprofile コンポーネントでユーザーの pic を即座に変更します。今のところ、書き込み可能なストアを使用しようとしましたが、機能せず、反応性に $ を追加すると、「サブスクライブは関数ではありません」というエラーが表示されます。

ユーザープロファイル コンポーネント

<script>

import Updatpic from '../../lib/components/userprivat/updatePic.svelte';
import { uPic } from  '../../lib/stores/uPic.js';
 import { onMount } from 'svelte';
let meData;
let skil =[];
  let picU;
  let pics;
  uPic.subscribe(newpic => {
    picU = newpic;
  });
  let picLink;

  onMount(async () => {
        const parseJSON = (resp) => (resp.json ? resp.json() : resp);
        const checkStatus = (resp) => {
        if (resp.status >= 200 && resp.status < 300) {
          return resp;
        }
        return parseJSON(resp).then((resp) => {
          throw resp;
        });
      };
      const headers = {
        'Content-Type': 'application/json'   
      };
        try {
            const res = await fetch(link, {
              method: 'GET',
       
        headers: {
            'Authorization': bearer1,
            'Content-Type': 'application/json'
                  },
            }).then(checkStatus)
          .then(parseJSON);
            meData = res
            console.log(res);
            
            pics = meData.profilePic.formats.small.url;
            uPic.set(meData.profilePic.formats.small.url);
            picLink = "http://localhost:5000" + picU;
           
        } catch (e) {
            error1 = e
        }
    });
    picLink = "http://localhost:5000" + picU;
  let updpic = 0;
</script>
  {#if picU}
    <div class="middle">
    <img
    width="250" height="250" 
    style="border-radius: 50%; margin-right:auto; margin-left:auto ;"  
    src={picLink}
    alt="profilePic"></div>
   <div class="name1">
    <button
     on:click={() => updpic = 1}
      style=" margin-right:auto; margin-left:auto ;"
       class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">עדכון תמונת פרופיל</button>
{#if updpic == 1} <Updatpic/> 
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-1 rounded" on:click={() => updpic = 0}>ביטול</button>
{/if}</div>
    {:else}
    <div class="middle"> 
<button
 on:click={() => addpic = 1}
  style=" margin-right:auto; margin-left:auto ;"
   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">העלאת תמונת פרופיל</button>
{#if addpic == 1} <Addnewp/>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-1 rounded"
 on:click={() => addpic = 0}>ביטול</button>
{/if}
    </div>
    {/if}

updatePic コンポーネント

import { uPic } from  '../../stores/uPic.js';
import axios from 'axios';
    let url1 = "http://localhost:5000/upload";

    
    let picU;
  
  uPic.subscribe(newpic => {
    picU = newpic;
  })
    
    let meData;
    

let link ="http://localhost:5000/users/" + idLi ;
let files;
function sendP () {
let fd = new FormData();
    fd.append('files', files[0]);
  axios
 .post( url1, fd  ,{
                headers: {
                    Authorization: bearer1,
                },
            })
            .then(({ data }) => {
                const imageId = data[0].id;  
  axios
  .post(link, {
    profilePic: imageId,
    
              },
  {
  headers: {
    'Authorization': bearer1
            }})
  .then(response => {
    console.log('הצליח', response.data);
    meData = res;
    uPic.set(meData.profilePic.formats.small.url);

              })
  .catch(error => {
    console.log('צריך לתקן:', error.response);
            });
  console.log("hh")
})};


</script>
    
    <div dir="rtl" class="flex content-center ">
        <label for="avatar">בחירת תמונה</label>
        <input type="file"
               id="avatar" name="avatar"
               accept="image/png, image/jpeg"
               bind:files={files}
               >
               <button on:click={sendP}  class="bg-blue-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">העלאה</button> 
              </div>

uPic.js

import { writable } from 'svelte/store';

export const uPic = writable();


export const updateuPic = () => {
    uPic.set()
};