JSFiddle - React, Tailwind, and code Playground

HTML

<main></main>
<script id='tpl_line_list' type='text/ractive'>
    {{#lines}}
        {{# prices.budgets:i }}
        {{/}}
    {{/lines}}
</script>

<script id='template' type='text/ractive'>
    <linelist lines="{{sorted_lines}}" />
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

// Sort a list by fields: ['status', '-updated']
function Sorted (list, fields) {
    var sorted = list, field, reverse;
    _.each(_.clone(fields).reverse(), function (f) {
        if (f[0] === '-') {
            field = f.substr(1);
            reverse = true;
        } else {
            field = f;
            reverse = false;
        }
        sorted = _.sortBy(sorted, field);
        if (reverse) sorted.reverse();
    });
    console.log( 'sorted', sorted );
    return sorted;
}

var LineList = Ractive.extend({
  template: '#tpl_line_list'
});

ractive = new Ractive({
    el: 'main',
    template: '#template',
    debug: true,
    components: {
        linelist: LineList
    },
    computed: {
        sorted_lines: function () {
            return Sorted( this.get('lines'), ['position', 'updated'] );
        }
    }
});

var lines = [
    {"name": "line-1", "prices": {"budgets": []}, "position": 1, "updated": 2}, 
    {"name": "line-2", "prices": {}, "position": 1, "updated": 1}, 
    {"name": "line-3", "prices": {"budgets": []}, "position": 1, "updated": 3}
];
ractive.set('lines', lines);