Vue

HTML

<div class="container" id="weather">
  <h1>Weather Pro</h1>
  <div class="float-left"><h2>{{date}}</h2></div>
  <div class="float-right" ><h3 id="time"></h3></div>
  <p>{{greeting}}</p>

  <div class="input-group">
    <form>
      <input v-model="city" class='searchbar transparent' id='search' type='text' placeholder='      enter city' />

      <input id='button' @click="getData" type="button" value='GO' />

    </form>
  </div>

  {{city}}
  <div class="panel">

    <div class="panel-body" v-for="d in data">
      <p>
        {{d}}
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>

  </div>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Vue

var app = new Vue({
  el: "#weather",
  data: {
    city: '',
    weather:[],
    date: new Date().toDateString(),
    greeting:'',
    data: null,

  },

  methods: {
    //method 1
    getData: function () {
      var that = this;
      var city = this.city
      console.log('getData')
      $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6", 
                function (data) {
        console.log(data)
        that.data = data;
      });

    },
/* 
    //method 2
    getData: function () {
      $("#search").keypress(function (e) {
        if (e.which == 13) {
          var city = $("#search").val();
          if (city != " ") {
            var url = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6";

            console.log(url);

          }
          $.getJSON(url, function (data) {
            this.weather = data.weather;
            console.log(data);
            this.returnGreeting();

          })
        }

      })
    }, */

  }
});