Используйте API расширения Chrome в компоненте Vue.js

Я пытаюсь получить доступ к локальному хранилищу chrome extension ergo в браузере Chrome в моем компоненте vue.js.

ServerList.vue

    <template>
      <div>
        <server-list :server-descriptions="serverDescriptions"/>
      </div>
    </template>

    <script>
      import ServerList from "./ServerList.vue"

      chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
        console.log('Settings saved');
      });

      chrome.storage.sync.get(['foo', 'bar'], function(items) {
        console.log('Settings retrieved', items);
      });
    [...]

   </script>

Этот код находится внутри моего popup.html, и это то, что консоль проверки popup.html говорит мне об этом:

Поэтому я полагал, что это сработало. Но когда я проверяю локальное хранилище через вкладку отладчика, я ничего не вижу:

Даже проверка localStorage в консоли вручную не показывает мне ничего:

Поэтому я предполагаю, что данные не сохраняются в моем браузере Chrome?

Кто-нибудь знает, как я могу заставить это работать? Или дать мне подсказку?