Thanks for the great question.  I did not know that they had finally released a stable version of the vector tiles. Moreover, you may have to work with this answer as it is a source of ideas to your "any ideas?" question.  I do not have a running studio yet.

I think one of the problems that you are running into is that you are using a tilejson file. [You need a tilejson service ][1] to use a that kind of file. Hence, I believe that you need to change your sources section to an in-line URL. Try

    "sources": {
    "osm_roads": {
      "type": "vector",
      "url": "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
     }
    },

or

    "sources": { 
    "osm_orads": {
      "type": "vector",
      "tiles": [
        "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
      ],
      "minzoom": 0,
      "maxzoom": 12
     }
    },

When they use `mapbox://` as the protocol, it is a alias/shorthand notation for their services.  The sources section was briefly discussed around 8:40 of the video.

One step of the new vector tile process is to curate the vector data by adjusting what you want in the data.  The other step is to bring the vector data back into MapBox Studio and render the data/create a style sheet. osm_roads would be step one while your c.json file is the style sheet. You may need a **tile live** server verses a **tile stream** as discussed around 15:01 of the video. The video says that you need additional meta data in the xml file.

The oddity here is that you reference the .pbf and style sheet elsewhere but the url that your provide is the resulting tiles .png files that are generated from the vector data.

You do not say, if you have a MapBox key.  For your own hosting, I believe that you will have to [copy the github styles and glyphs][2] to your own server.  Notice again that there is a mapbox:// protocol in glyphs tag.  These two tags may not be needed because you are rendering plain lines and polygons and not POIs via icons.   It is worth taking a look.

Finally, the video says that you can take a generated vector layer back into the studio to style it.  You may want to reference your vector layer and apply your id:background and id:roads style there in the studio first.  The video says that tile live is the server behind the scene of MapBox Studio.  The idea here is to make sure that you have all the step two problems understood and fixed before you try to serve up the final vector tiles that are dynamically rendered.


  [1]: http://gis.stackexchange.com/questions/109838/tilemill-reference-layer-plugin-doesnt-work-w-non-mapbox-tilejson/110043#110043 "tile json issue"
  [2]: https://github.com/mapbox/mapbox-gl-styles "gl-styles"