<div class="wrapper">
            <div id="clock" v-cloak>
                <div class="container">
                    <p class="date">{{ date }}</p>
                    <p class="time">{{ time }}</p>

                    <div class="wrapper__choose wrapper__choose-region">
                        <p>Choose your region: </p>
                        <select id="dateselect" class="" v-model="checked">
                            <option  value="choose" selected="checked">Moscow</option>
                            <option v-for="item in city" :value="item" :timeVal="timeVal" :updateTime="updateTime">{{  item.city }}
                            </option>
                        </select>
                    </div>
                    <div class="form-container">

                        <form @submit.prevent="info">
                            <div class="form-group wrapper__choose" v-if="settings.voiceList.length">
                                <label for="voices">Choose voice:</label>
                                <select class="form-control" id="voices" v-model="settings.selectedVoice">
                                    <option v-for="(voice, index) in settings.voiceList" :data-lang="voice.lang" :value="index">
                                        {{ voice.name }} ({{ voice.lang }})
                                    </option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-success">Speak now time</button>

                        </form>

                    </div>
                </div>
            </div>



</div>

body {
  padding: 20px 35px 40px;
  background: #0f3854;
  background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
  
  display: flex;
  align-items: center;
  justify-content: center;
}
p {
  margin: 0;
  padding: 0;
}
#clock {
  padding: 20px 35px 40px;
  background: #0f3854;
  background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  color: #daf6ff;
  text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
  .time {
    letter-spacing: 0.05em;
    font-size: 80px;
    padding: 5px 0;
  }
  .date {
    letter-spacing: 0.1em;
    font-size: 24px;
  }
  .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
  }
}


.form-container {
  text-align: left;
  select {
    margin: 20px 0 !important;
  }
}

select {
    display: block;
    margin: 30px auto 0;
    cursor: pointer;
    background: transparent;
    color: #daf6ff;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10,175,230,0);
    outline: none;
    border-color: rgba(#000, .4);
    &:focus {
      background: transparent;
      color: #daf6ff;
      text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10,175,230,0);
    }
  }

  .wrapper {
    &__choose {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    &__choose-region {
      margin-bottom: 30px;
      select {
        margin: 0 20px 0;
      }
    }
  }
  [v-cloak] {
    display: none;
  }

var clock = new Vue({
    el: '#clock',

    data: function() {
        return {
            time: '',
            date: '',
            synth: window.speechSynthesis,
            settings: {
                selectedVoice: 2,
                voiceList: []
            },
            greetingSpeech: new window.SpeechSynthesisUtterance(),
            checked: 'choose',
            city: [
                { city: 'Honolulu', region: 'Pacific/Honolulu', timeRing: 0},
                { city: 'Anchorage', region: 'America/Anchorage', timeRing: 1},
                { city: 'Los Angeles', region: 'America/Los_Angeles', timeRing: 2},
                { city: 'San Francisco', region: 'America/Los_Angeles', timeRing: 3},
                { city: 'Vancouver', region: 'America/Vancouver', timeRing: 4},
                { city: 'Phoenix', region: 'America/Phoenix', timeRing: 5},
                { city: 'Denver', region: 'America/Denver', timeRing: 6},
                { city: 'Costa Rica', region: 'America/Costa_Rica', timeRing: 7},
                { city: 'Chicago', region: 'America/Chicago', timeRing: 0},
                { city: 'Cancun', region: 'America/Cancun', timeRing: 0},
                { city: 'Jamaica', region: 'America/Jamaica', timeRing: 0},
                { city: 'Toronto', region: 'America/Toronto', timeRing: 0},
                { city: 'Puerto Rico', region: 'America/Puerto_Rico', timeRing: 0},
                { city: 'Dublin', region: 'Europe/Dublin', timeRing: 0},
                { city: 'London', region: 'Europe/London', timeRing: 0},
                { city: 'Rome', region: 'Europe/Rome', timeRing: 0},
                { city: 'Vatican', region: 'Europe/Vatican', timeRing: 0},
                { city: 'Berlin', region: 'Europe/Berlin', timeRing: 0},
                { city: 'Prague', region: 'Europe/Prague', timeRing: 0},
                { city: 'Madrid', region: 'Europe/Madrid', timeRing: 0},
                { city: 'Paris', region: 'Europe/Paris', timeRing: 0},
                { city: 'Warsaw', region: 'Europe/Warsaw', timeRing: 0},
                { city: 'Algiers', region: 'Africa/Algiers', timeRing: 0},
                { city: 'Athens', region: 'Europe/Athens', timeRing: 0},
                { city: 'Cairo', region: 'Africa/Cairo'},
                { city: 'Johannesburg', region: 'Africa/Johannesburg'},
                { city: 'Istanbul', region: 'Europe/Istanbul'},
                { city: 'Jerusalem', region: 'Asia/Jerusalem'},
                { city: 'Baghdad', region: 'Asia/Baghdad'},
                { city: 'Kuwait', region: 'Asia/Kuwait'},
                { city: 'Addis Ababa', region: 'Africa/Addis_Ababa'},
                { city: 'Tehran', region: 'Asia/Tehran'},
                { city: 'Moscow', region: 'Europe/Moscow'},
                { city: 'Katmandu', region: 'Asia/Katmandu'},
                { city: 'Hong Kong', region: 'Asia/Hong_Kong'},
                { city: 'Kuala Lumpur', region: 'Asia/Kuala_Lumpur'},
                { city: 'Singapore', region: 'Asia/Singapore'},
                { city: 'Perth', region: 'Australia/Perth'},
                { city: 'Tokyo', region: 'Asia/Tokyo'},
                { city: 'Melbourne', region: 'Australia/Melbourne'}
            ],
            region: 'Europe/Moscow',
            cityNow: 'Moscow',
            week: ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']
        }
    },
    mounted: function() {
        var _this = this;
        this.settings.voiceList = this.synth.getVoices();
        this.synth.onvoiceschanged = function() {
            var voices = _this.synth.getVoices();
            var voice_list = [];

            voices.forEach(function(voice) {
                if (voice.lang != "ru-RU") {
                    voice_list.push(voice);
                }
            });

            _this.settings.voiceList = voice_list;
        };
    },
    methods: {
        // сингл методы
        sayThis: function(text) {
            this.greetingSpeech.text = text;
            this.greetingSpeech.voice = this.settings.voiceList[
                this.settings.selectedVoice
                ];
            this.synth.speak(this.greetingSpeech);
        },

        info: function() {
            var newhr = new Date().toLocaleTimeString('en', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false,
                timeZone: this.region
            });
            this.sayThis("Time in " + this.cityNow + newhr);
            return false;
        }
    },
    computed: {
        timeVal: function () {
            if(this.checked.region) {
                this.cityNow = this.checked.city;
            }
            return clock.region = this.checked.region;
        }
    }
});

var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = cd.toLocaleTimeString('en', {
        second: '2-digit',
        minute: '2-digit',
        hour: '2-digit',
        hour12: false,
        timeZone: clock.region
    });
    clock.date = clock.week[cd.getDay()];
};