title: Displaying the selected city in the vue button
body: <p>Have the component:</p>
  <pre><code>  &lt;div class='regions-list'&gt;
    &lt;button @click='toggle = !toggle'&gt;{{ selected }}&lt;/button&gt;
      &lt;div class='regions-list__popup' v-if='toggle'&gt;
        &lt;i class='regions-list__close si si-cross' @click='closePopup'&gt;&lt;/i&gt;
        &lt;div class='regions-list__title'&gt;City&lt;/div&gt;
        &lt;div class='regions-list__form-search'&gt;
          &lt;input
            class='regions-list__search'
            type='text'
            placeholder='Looking for...'
            v-model='searchQuery'
          /&gt;
          &lt;button class='regions-list__search-btn'&gt;
            &lt;span class='si si-search'&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;a v-for='item in resultQuery' :key='item.seo_name' :href='item.link' class='regions-list__name' @click='selectLink(item.name)'&gt;{{
          item.name
        }}&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and vue:</p>
  <pre><code> export default {
    props: {
    region: {
    type: Array,
    default: () =&gt; []
   }
  },
   data() {
    return {
     toggle: false,
     searchQuery: null,
     selected: 'Selected'
    };
   },
  computed: {
  resultQuery() {
    if (this.searchQuery) {
      return this.region.filter(item =&gt; {
        return this.searchQuery
          .toLowerCase()
          .split(' ')
          .every(v =&gt; item.name.toLowerCase().includes(v));
      });
    } else {
      return this.region;
    }
  }
  },
  methods: {
  closePopup() {
    this.toggle = false;
  },
   selectLink(link) {
     this.selected = link;
     }
    }
   };
  </code></pre>
  <p>When choosing a city, need to display it in the button. Is it possible? (seems like i need to use storage)
  The selection is saved in the <code>{{ Selected }}</code> variable, but disappears when switching to another page. What can be done?</p>