JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.global.prod.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

<div id="app">
  <div class="controls">
    <input type="range" v-model.number="radiusKM" min="5" max="100" step="5">
  </div>
  <div class="map" ref="map"></div>
</div>

CSS

body {
  margin: 0;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.controls {
  height: 50px;
  display: flex;
  align-items: center;
}

.map {
  flex-grow: 1;
}

JavaScript

Vue.createApp({
  data: () => ({
    coords: [ 55.751244, 37.618423 ],
    radiusKM: 20,
  }),
  computed: {
    radiusM() {
      return this.radiusKM * 1000;
    },
  },
  watch: {
    radiusM(val) {
      this.circle.geometry.setRadius(val);
    },
  },
  mounted() {
    ymaps.ready(() => {
      this.map = new ymaps.Map(this.$refs.map, {
        center: this.coords,
        controls: [],
        zoom: 8,
      });

      this.circle = new ymaps.Circle([
        this.coords,
        this.radiusM,
      ], {}, {
        fillColor: 'rgba(254, 37, 90, 0.1)',
        strokeColor: '#FE255A',
        strokeOpacity: 1,
        strokeWidth: 1,
      });

      this.map.geoObjects.add(this.circle);
    });
  },
}).mount('#app');