Vue-Resource: How to get and show multiple arrays from JSON - vue-resource

Question

I have a JSON from my API:
{"users":
[
{"id":1,"name":"Adam"},
{"id":2,"name":"Barry"}
],
"announcements":
[
{"id":1,"content":"blah blah"},
{"id":2,"content":"ya ya"}
]
}
How do I make vue-resource get those arrays and put them into users and announcements respectively, so that they can be looped in the view?
My script:
export default {
name: 'home',
data: {
users: [],
announcements: []
},
methods: {
fetchData () {
this.$http.get('http://localhost:3000')
.then(function (response) {
// what do I put here to assign the response to users and announcements?
})
},
},
created: function () {
this.fetchData()
}

Answer 1

From Jayem's advice, I used Axios:
Install then reference axios
import axios from 'axios'
Vue.prototype.$http = axios
Use Axios
<script>
export default {
data () {
return { info: null, announcements: null, users: null }
},
mounted () {
this.$http
.get('http://localhost:3000/')
.then(response => {
(this.info = response.data)
console.log(response.data.announcements)
console.log(response.data.users)
})
}
}
</script>
Add in View:
<div v-for="announcement in info.announcements">
{{ announcement.content }}
</div>
<div v-for="user in info.users">
{{ user.name }}
</div>