Edit in JSFiddle

<div id="demo">
     <h1>Latest Vue.js Commits</h1>

    <input type="radio" id="master" name="branch" v-model="branch" value="master">
    <label for="master">master</label>
    <br>
    <input type="radio" id="dev" name="branch" v-model="branch" value="dev">
    <label for="dev">dev</label>
    <ul>
        <li v-repeat="commits">
            <a href="{{html_url}}" target="_blank" class="commit">
                {{sha.slice(0, 7)}}
            </a>
            - <span class="message">{{commit.message | truncate}}</span>
            <br>
            by <span class="author">{{commit.author.name}}</span>
            at <span class="date">{{commit.author.date | formatDate}}</span>
        </li>
    </ul>
</div>

var apiUrl = 'https://api.github.com/repos/yyx990803/vue/commits?per_page=3&sha='

var demo = new Vue({

    el: '#demo',

    data: {
        branch: 'master'
    },

    created: function () {
        this.$watch('branch', function () {
            this.fetchData()
        })
    },

    filters: {
        truncate: function (v) {
            var newline = v.indexOf('\n')
            return newline > -1 ? v.slice(0, newline) : v
        },
        formatDate: function (v) {
            return v.replace(/T|Z/g, ' ')
        }
    },

    methods: {
        fetchData: function () {
            var xhr = new XMLHttpRequest(),
                self = this
            xhr.open('GET', apiUrl + self.branch)
            xhr.onload = function () {
                self.commits = JSON.parse(xhr.responseText)
            }
            xhr.send()
        }
    }
})

#demo {
    font-family:'Helvetica', Arial, sans-serif;
    font-size: 13px;
    padding-left: 15px;
}
a {
    text-decoration: none;
    color: #f66;
}
li {
    line-height: 1.5em;
    margin-bottom: 20px;
}
.author, .date {
    font-weight: bold;
}